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

Is inputfileds misspelt in your code as well or just here? Anyway, try formControlName='{{checklists.controls["noradio"].value}}' ... — Arwin
– Arwin, Commented Feb 1, 2017 at 21:48
No its not misspelt on the form builder i actually put it as inputfileds — Geoff
– Geoff, Commented Feb 1, 2017 at 21:52
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. — wesside
– wesside, Commented Feb 1, 2017 at 21:54
#wesside am looping through the array of controls as from <ion-card *ngFor='let checklists in the question thats why ive called checklists — Geoff
– Geoff, Commented Feb 1, 2017 at 21:54

silentsod · Accepted Answer · 2017-02-01 22:03:07Z

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.

answered Feb 1, 2017 at 22:03

silentsod

8,35545 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Geoff Over a year ago

what of radio buttons what should i use to bind since binding with formControl causes both to be checked

silentsod Over a year ago

Per HTML radio buttons are grouped by name and then made distinct by their value: plnkr.co/edit/PnEheiI0NB6BYq229CLR?p=preview

silentsod Over a year ago

@GEOFFREYMWANGI to get your attention because I forgot it in my first comment.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related