angular - angular2 creating and populating radio button group with ngFor -
i iterating on json object array , trying create radio buttons pre-selected values:
<div *ngfor="let task of tasks"> <p> <mdl-textfield label="what task" type="text" formcontrolname="what_task" floating-label [ngmodel]="task.what_task"></mdl-textfield> </p> <p> how perform?<br/> <mdl-radio value="daily" formcontrolname="how_often" mdl-ripple [(ngmodel)]="task.how_often">daily once</mdl-radio> <mdl-radio value="weekly" formcontrolname="how_often" mdl-ripple [(ngmodel)]="task.how_often">weekly once</mdl-radio> </p><br> </div> consider have 2 tasks, 1 has value of how_often set 'daily' , second has set 'weekly'. 2 sets of radio buttons created both value 'weekly' i.e. of second task.
what doing wrong in case? correct way generate radio button pairs ngfor?
update:
my entire template:
<mdl-expansion-panel-group> <mdl-expansion-panel *ngfor="let task of tasks"> <mdl-expansion-panel-header> <mdl-expansion-panel-header-list-content><h6>{{task.what_task}}</h6></mdl-expansion-panel-header-list-content> </mdl-expansion-panel-header> <mdl-expansion-panel-content> <mdl-expansion-panel-body> <form [formgroup]="form"> <!-- task --> <p> <mdl-textfield label="what task" type="text" formcontrolname="what_task" floating-label [ngmodel]="task.what_task"></mdl-textfield> </p> <!-- how --> <p> how perform?<br/> <mdl-radio value="daily" formcontrolname="how_often" mdl-ripple >daily once</mdl-radio> <mdl-radio value="weekly" formcontrolname="how_often" mdl-ripple >weekly once</mdl-radio> </p><br> <!-- how important --> <p> how important is?<br/> <mdl-radio value="extremely" formcontrolname="how_important" mdl-ripple [ngmodel]="task.how_important">extremely important</mdl-radio> <mdl-radio value="rather" formcontrolname="how_important" mdl-ripple [ngmodel]="task.how_important">rather important</mdl-radio> </p><br> <!-- why --> <p> <mdl-textfield rows="3" label="why need perform" type="text" [ngmodel]="task.why_perform" formcontrolname="why_perform" floating-label></mdl-textfield> </p> <!-- why important --> <p> <mdl-textfield rows="3" label="why important" type="text" [ngmodel]="task.why_important" formcontrolname="why_important" floating-label></mdl-textfield> </p> <!-- possible improvement --> <p> <mdl-textfield rows="3" label="what improvement can think of" type="text" [ngmodel]="task.possible_improvement" formcontrolname="possible_improvement" floating-label></mdl-textfield> </p> <!-- existing solutions --> <p> <mdl-textfield rows="3" label="what tools/solutions use" type="text" [ngmodel]="task.existing_solutions" formcontrolname="existing_solutions" floating-label></mdl-textfield> </p> <!-- how important improvement --> <p> how important improvement?<br/> <mdl-radio value="extremely" formcontrolname="how_important_improvement" mdl-ripple [ngmodel]="task.how_important_improvement">extremely important</mdl-radio> <mdl-radio value="rather" formcontrolname="how_important_improvement" mdl-ripple [ngmodel]="task.how_important_improvement">rather important</mdl-radio> </p><br> <!-- advantages of improvement --> <p> how important improvement?<br/> <mdl-radio value="saves money" formcontrolname="advantages_of_improvement" mdl-ripple [ngmodel]="task.advantages_of_improvement">saves money</mdl-radio> <mdl-radio value="saves time" formcontrolname="advantages_of_improvement" mdl-ripple [ngmodel]="task.advantages_of_improvement">saves time</mdl-radio> <mdl-radio value="saves efforts" formcontrolname="advantages_of_improvement" mdl-ripple [ngmodel]="task.advantages_of_improvement">saves rfforts</mdl-radio> </p><br> <p> <button mdl-button (click)="updatetask(task, task.id)" [disabled]="!form.valid" mdl-button-type="raised" mdl-ripple mdl-colored="primary">submit</button> </p> </form> <div style="color: red;" *ngif="errormessage"> <h4>{{errormessage}}</h4> </div> <div style="color: green;" *ngif="successmessage"> <h4>{{successmessage}}</h4> </div> </mdl-expansion-panel-body> </mdl-expansion-panel-content> </mdl-expansion-panel> </mdl-expansion-panel-group> and in component have:
this.form = fb.group({ 'what_task': this.what_task, 'how_often': this.how_often, 'how_important': this.how_important, 'why_perform': this.why_perform, 'why_important': this.why_important, 'possible_improvement': this.possible_improvement, 'existing_solutions': this.existing_solutions, 'how_important_improvement': this.how_important_improvement, 'advantages_of_improvement': this.advantages_of_improvement, }); } ngoninit() { this.gettasks(); } public updatetask(task, taskid) { console.log(task, taskid); this.steps=task.steps; this.task.what_task=this.form.value.what_task this.task.how_often=this.form.value.how_often this.task.how_important=this.form.value.how_important this.task.why_perform=this.form.value.why_perform this.task.why_important=this.form.value.why_important this.task.possible_improvement=this.form.value.possible_improvement this.task.existing_solutions=this.form.value.existing_solutions this.task.how_important_improvement=this.form.value.how_important_improvement this.task.advantages_of_improvement=this.form.value.advantages_of_improvement this.taskservice.updatetask(this.task, taskid).subscribe( task => { this.task = task, this.errormessage=null; this.successmessage='task updated successfully!' }, error => { this.errormessage = <any>error; this.successmessage=null; }) }
the reason (all 4 of them) referencing same formcontrol seen here: formcontrolname="how_often".
by making formarray, matches each task, achieve desired result.
taskform.component.ts
createformgroup() { return this.fb.group({ 'what_task': this.what_task, 'how_often': this.how_often, 'how_important': this.how_important, 'why_perform': this.why_perform, 'why_important': this.why_important, 'possible_improvement': this.possible_improvement, 'existing_solutions': this.existing_solutions, 'how_important_improvement': this.how_important_improvement, 'advantages_of_improvement': this.advantages_of_improvement, }); } ngoninit() { this.gettasks(); this.formarray = new formarray([]); for(const task of this.tasks) { this.formarray.push(this.createformgroup()); } } taskform.component.html
<mdl-expansion-panel *ngfor="let task of tasks; let = index"> <form [formgroup]="formarray.at(i)"> in template highlighted major changes. other lines, template should able stay is.
i have created sample plunkr here: https://plnkr.co/edit/qizibpajjeyg73c3vmhb?p=preview
Comments
Post a Comment