如何在响应式表单中使用对象数组作为控件

我需要动态创建textarea对于表格。我有以下模型：

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

并形成：

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),
      })
});

模板部分：

<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>

所以，正如你所看到的，我有一个对象数组，我想使用label属性以显示它textarea。现在我明白了[object Object]。如果我改变options到一个简单的字符串数组，例如：['Option 1', 'Option 2']，然后一切正常。但我需要使用对象。所以，而不是：

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

我努力了：

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

但是，这不起作用。
如何使用对象数组？

This is Plunkr http://plnkr.co/edit/ypq0YgSkoP4ZdNVqbvZB?p=preview

您需要添加一个 FormGroup，其中包含您的label and value。这也意味着由表单创建的对象与您的构建具有相同的构建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();
}

之后，我们使用 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]
  })    
}

最后，这里有一个

Demo https://stackblitz.com/edit/angular-cgpqcq?file=src%2Fapp%2Fapp.component.html