Accessing the value of a control in a form array in angular2

Question

Am setting my form via form builder with an array of a rest api result

This is my form builder code

 this._inspectionService.getChecklists(this.truckParam)
 .subscribe(
 res=> {
 this.checklists = res;
 let inspectionform: FormGroup;
 let checkinputs: FormArray = new FormArray([]);
 for (let i = 0; i < this.checklists.length; i++) {
 checkinputs.push(
 new FormGroup({
 description:new FormControl(this.checklists[i].item),
 input: new FormControl(''),
 yesradio: new FormControl(''),
 noradio: new FormControl(''),
 })
 )
 }
 this.inspectionform = this._formBuilder.group({
 inputfileds: this._formBuilder.array(checkinputs.controls)
 })
 },
 );

Now in my form

<form [formGroup]="inspectionform">
<ion-card *ngFor='let checklists of inspectionform.controls["inputfileds"]["controls"] 
 ;let i=index'>
//at this stage i can access
{{checklists.controls["description"].value}} //it retuns a value
//NOW AM trying to connect the form control inputs via
 <ion-input type="text" formControlName='checklists.controls["noradio"]'>
IVE ALSO TRIED
 <ion-input type="text" formControlName='checklists.controls.noradio'>

And the error returned is

Cannot find control with name: 'checklists.controls["noradio"]'

Where am i going wrong

• Arwin: Is inputfileds misspelt in your code as well or just here? Anyway, try formControlName='{{checklists.controls["noradio"].value}}' ...
• wesside: Isn't it inspectionform.controls['']...
• Geoff: No its not misspelt on the form builder i actually put it as inputfileds
• wesside: But accessing the FormBuilder object with controls, which is assigned to inspectionform so why not try inspectionform.control['inputfileds]['noradio'] since you're adding it to that builder.
• Geoff: #wesside am looping through the array of controls as from <ion-card *ngFor='let checklists in the question thats why ive called checklists

Answer 1

There is no form control with a name of "checklists.controls["noradio"]", it would bind with [formControl]="checklists.controls['noradio']" however because then it attaches directly to the control object. [formControlName]="'noradio'" might also work but FormArray access and control is not my strong suit.

The syntax between the two is different enough that it warrants further reading.

• Geoff: what of radio buttons what should i use to bind since binding with formControl causes both to be checked
• silentsod: Per HTML radio buttons are grouped by name and then made distinct by their value: plnkr.co/edit/PnEheiI0NB6BYq229CLR?p=preview
• silentsod: @GEOFFREYMWANGI to get your attention because I forgot it in my first comment.