Angular 2. How to use array of objects for controls in Reactive Forms

Question

I need to dynamic create textarea for forms. I have the following model:

this.fields = {       isRequired: true,       type: {         options: [           {             label: 'Option 1',             value: '1'           },           {             label: 'Option 2',             value: '2'           }         ]       }     }; 

And form:

this.userForm = this.fb.group({       isRequired: [this.fields.isRequired, Validators.required],       //... here a lot of other controls       type: this.fb.group({          options: this.fb.array(this.fields.type.options),       }) }); 

Part of template:

<div formGroupName="type">        <div formArrayName="options">          <div *ngFor="let option of userForm.controls.type.controls.options.controls; let i=index">             <textarea [formControlName]="i"></textarea>          </div>       </div> </div> 

So, as you can see I have an array of objects and I want to use label property to show it in a textarea. Now I see [object Object]. If I change options to a simple string array, like: ['Option 1', 'Option 2'], then all works fine. But I need to use objects. So, instead of:

<textarea [formControlName]="i"></textarea> 

I have tried:

<textarea [formControlName]="option[i].label"></textarea> 

But, it doesn't work.
How can I use an array of objects?

This is Plunkr

Answer 1

You need to add a FormGroup, which contains your label and value. This also means that the object created by the form, is of the same build as your fields object.

ngOnInit() {   // build form   this.userForm = this.fb.group({     type: this.fb.group({       options: this.fb.array([]) // create empty form array        })   });    // patch the values from your object   this.patch(); } 

After that we patch the value with the method called in your OnInit:

patch() {   const control = <FormArray>this.userForm.get('type.options');   this.fields.type.options.forEach(x => {     control.push(this.patchValues(x.label, x.value))   }); }  // assign the values patchValues(label, value) {   return this.fb.group({     label: [label],     value: [value]   })     } 

Finally, here is a

Demo