Angular 2/4 Übergeben/Erfassen von Radiobutton-Werten mit Winkelschrift

Question

Ich bin neu in Angular 2/4 und Typoskript .. Ich möchte die Radio-Button-Werte für das Telefon, E-Mail und Adresse ausgewählt und übergeben Sie die ausgewählten Werte zu Typoskript-Seite. client.info.ts

Wie gehe ich über das Abrufen der Werte des Radio-Button in Typoskript von HTML-Seite geklickt. Ich habe meine Typoskript und HTML-Code unten eingefügt. Derzeit dies nicht

Arbeits

kann jemand

hier ist für die

Client-info.component.html (Daten gezogen von JSON-Datei)

<div class="section-container"> 
     <!--<div class="section-subtitle"> Client Information </div> --> 
    <div class="message-info"> 
     <span>Choose a Primary Phone Number</span> 
    </div>   
     <div class="section-content"> 
       <div fxLayout="column" fxLayout.gt-xs="row" class="row">       


          <div *ngFor="let a of clientsArray; let i = index;" > 

           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label"><input type="radio" name="phone" checked value="{{a.homePhone}}"/> Home:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="phone" [(ngModel)]="a.homePhone" checked [value]="{{a.homePhone}}"/> {{a.homePhone}} (Home)</div> 
           </div> 
           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label"><input type="radio" name="phone" value="{{a.workPhone}}"/> Work:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="phone" [(ngModel)]="a.workPhone" [value]="{{a.workPhone}}"/> {{a.workPhone}} (Work)</div> 
           </div> 
           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label"><input type="radio" name="phone" value="{{a.mobilePhone}}"/> Mobile:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="phone" [(ngModel)]="a.mobilePhone" [value]="{{a.mobilePhone}}"/> {{a.mobilePhone}} (Mobile)</div> 
           </div> 
           <!--<div fxHide.gt-sm class="divider"></div>--> 
          </div> 


        </div>  
     </div> 
    </div>  

    <!----> 


    <!--Email --> 

    <div class="section-container"> 
     <!--<div class="section-subtitle"> Client Information </div> --> 
    <div class="message-info"> 
     <span>Email Address:</span> 
    </div>   
     <div class="section-content"> 
       <div fxLayout="column" fxLayout.gt-xs="row" class="row">       

          <div *ngFor="let a of clientsArray; let i = index;" > 

           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label">Address 1:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="email" [(ngModel)]="a.email1" checked [value]="{{a.email1}}"/>{{a.email1}}</div> 
           </div> 
           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label">Address 2:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="email" [(ngModel)]="a.email12" [value]="{{a.email2}}"/>{{a.email2}}</div> 
           </div> 
           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label">Address 3:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="email" [(ngModel)]="a.email13" [value]="{{a.email3}}"/>{{a.email3}}</div> 
           </div> 
           <!--<div fxHide.gt-sm class="divider"></div>--> 
          </div> 


        </div>  
     </div> 
    </div>  

    <!----> 



    <!--Address--> 

    <div class="section-container"> 
     <!--<div class="section-subtitle"> Client Information </div> --> 
    <div class="message-info"> 
     <span>Address:</span> 
    </div>   
     <div class="section-content"> 
       <div fxLayout="column" fxLayout.gt-xs="row" class="row">       

          <div *ngFor="let a of clientsArray; let i = index;" > 

           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label">Address 1:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="address" [(ngModel)]="a.address1" [value]="{{a.address1}}"/>{{a.address1}}</div> 
           </div> 
           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label">Address 2:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="address" [(ngModel)]="a.address2" [value]="{{a.address3}}"/>{{a.address2}}</div> 
           </div> 
           <div class="group" fxLayout="row" fxLayoutAlign="center center"> 
           <!--<div fxFlex="100" class="label">Address 3:</div>--> 
           <!--<div fxFlex="60" class="data">{{loanModel.getSsn()}}</div>--> 
           <div fxFlex="100" class="data"><input type="radio" name="address" [(ngModel)]="a.address3" checked [value]="{{a.address3}}"/>{{a.address3}}</div> 
           </div> 
           <!--<div fxHide.gt-sm class="divider"></div>--> 
          </div> 


        </div>  
     </div> 
    </div>  

    <!----> 

    <!-- <div class-"btn-b"><input type="button" id="sendClientInfobtn" value=""><input type="button" id="Closebtn" value="Cancel"> </div> --> 

    <!----> 

Client meinen Code helfen. info.component.ts

import { Component, OnInit }    from '@angular/core'; 
    import { Input }       from '@angular/core'; 

    import { CoreService }     from 'app/core/service/core.service'; 
    import { FaService }      from '../../service/fa.service'; 
    import { ClientAccountModel } from "app/fa/model/client-account.model"; 
    import { ClientModel } from "app/fa/model/client.model"; 

    @Component({ 
     selector: 'fa-edit-client-info', 
     templateUrl: './fa-edit-client-info.component.html', 
     styleUrls: ['./fa-edit-client-info.component.css', '../fa.css'] 
    }) 
    export class FaEditClientInfoListComponent implements OnInit { 
     @Input() clientId: string = ""; 
     // public clientAccountsArray: ClientAccountModel[]; 
     // public totalAccounts: number = 0; 


     public popUpTitle = "Loan Particiapnts"; 
     public clientsArray: ClientModel[] = []; 
     public openedIndex: number = -1; 
     public totalClients: number = 0; 



     constructor( 
     private coreService: CoreService, 
     private faService: FaService 
    ) { 
     } 

     ngOnInit() { 
     console.log("cliendid " +this.clientId); 
     this.initData(); 

/*************/ 
     this.client = { 
    workPhone: this.client.workPhone, 
    homePhone: this.client.homePhone 
    }; 
/***************/ 
     } 

     initData(): void { 
     let isEligible:boolean = true; 
     this.faService.getLoanParticpantDetailsAlt(this.clientId) 
      .subscribe(
      successModel => { 
      this.clientsArray = successModel; 
       this.totalClients = this.clientsArray.length; 
      }, 
      error => { 
       this.onError(error); 
      } 
     ); 
     } 



     doSelect(): void { 
     this.coreService.closeModal(""); 
     } 

     onError(error): void { 
     console.log("ERROR!: " + error); 
     } 

    } 

Answer 1

Ich bin wie dies in meinen Projekten tun

<input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/> 
<input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/> 
<input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/> 
<input type="radio" name="address" [(ngModel)]="radioData" [value]="a.workPhone"/> 

durch diese ngModel tun wird sich ändern, wenn u den Button Radio klicken entsprechend seiner Eingangswert

client.info.ts Ich schlage vor, Sie Winkel Regeln zu folgen, Namensgebung Komponente wie diese client-info.component.ts

In Ihrer Komponentenklasse delcare u einfach radioData

export class ClientInfoComponent implements OnInit { 
    public radioData: any; <--- your radio data will be updated when on click 

    ngOnInit() { 
     // initialize your radio with value 
     this.radioData = 1; 
    } 
} 

Answer 2

entweder Vorlage verwenden form und [(ng-model)] und um "value" des Kontrollkästchens zu erhalten oder Reactive form zu verwenden und die Eigenschaft form-control name zu verwenden, um den Wert des dem Modell zugewiesenen Inputs zu erhalten.

Answer 3

Es wird empfohlen

diese

FormsModule Ansatz

hinzufügen für den Umgang mit Formulareingaben die FormsModule oder reaktiven Formen zu verwenden, um Ihre app.module.ts

import { FormsModule } from '@angular/forms'; 

@NgModule({ 
    imports:  [ BrowserModule, FormsModule ], // import forms module 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 

dann innen Ihre Komponente.html

<div> 
    <input type="radio" name="phone" [(ngModel)]="client.homePhone" [value]="client.homePhone"> 
    {{client.homePhone}} 
</div> 

<div> 
    <input type="radio" name="phone" [(ngModel)]="client.workPhone" [value]="client.workPhone"> 
    {{client.workPhone}} 
</div> 

in Ihrem component.ts ein Modell für das client Objekt erstellen

ngOnInit() { 
    this.client = { 
    workPhone: '', 
    homePhone: '' 
    }; 
} 

Sie die Werte aus dem Objekt irgendwo im Innern des Bauteils durch Bezugnahme auf die geforderten Eigenschaften verwenden können. Wenn Sie beispielsweise auf workPhone zugreifen möchten, verwenden Sie this.client.workPhone.