angular2 services - Angular 2/4 How to pass/capture radio button values using Angular typescript -
i new angular 2/4 , typescript.. want radio button values selected phone, email , address , pass selected values typescript page. client.info.ts
how go getting values of radio button clicked in typescript html page. have included typescript , html code below. not working
can help
here code the
client-info.component.html(data pulled json file)
<div class="section-container"> <!--<div class="section-subtitle"> client information </div> --> <div class="message-info"> <span>choose primary phone number</span> </div> <div class="section-content"> <div fxlayout="column" fxlayout.gt-xs="row" class="row"> <div *ngfor="let of clientsarray; let = 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 of clientsarray; let = 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 of clientsarray; let = 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.info.component.ts
import { component, oninit } '@angular/core'; import { input } '@angular/core'; import { coreservice } 'app/core/service/core.service'; import { faservice } '../../service/fa.service'; import { clientaccountmodel } "app/fa/model/client-account.model"; import { clientmodel } "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); } }
i'm doing in projects
<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"/> by doing ngmodel change when u click radio button according input value
client.info.ts suggest follow angular rules naming component client-info.component.ts
in component class u delcare radiodata
export class clientinfocomponent implements oninit { public radiodata: any; <--- radio data updated when on click ngoninit() { // initialize radio value this.radiodata = 1; } }
Comments
Post a Comment