在ReactiveForm中设置Angular 2 FormArray值？

Question

这里已经存在类似的问题(设置初始值Angular 2 reactive formarray)但我对答案不满意或者可能正在寻找其他解决方案.

我认为使用FormArray的重点是传递对象数组,它应该创建相同数量的组件.但是在上面的示例中,如果查看提供的plunker,即使提供了两个Addresses对象,也会创建一个Address,因为它的空白版本已经在ngOnInit()中创建.

所以我的问题是,如果在ngOnInit()我有这样的地址:this._fb.array([])//空白列表,那么我该如何设置它的值,它动态地从N个地址创建N个地址在我的TypeScript数组中？

Answer 1

我有相同的问题。这是我如何做到的：

正如您所提到的，您像这样初始化表单数组：

  addresses: this._fb.array([])

然后在 ngOnInit() （或在我的情况下 ionViewDidLoad() - 使用 Ionic 2）中，您执行异步操作以访问远程数据库并通过承诺或可观察（并订阅可观察）取回值。然后将所有其他非 formArray 的表单控件 patchValue （如果您有表单组和表单数组，请不要使用 setValue ！！）。

对于 formArray，请执行以下操作：

   this.yourForm.setControl('addresses', this.fb.array(data.addresses || []));

其中 data.addresses 是一个地址数组（您在之前的操作中从相同的形式创建它们。）

希望这能解决您和我的问题:) FormArray 功能强大，希望有更多资源来教我们如何正确使用它。

Answer 2

要设置值并从FORM数组中删除值，请参见以下代码。这是一个一般的例子。请调整您的代码

import { FormArray, FormBuilder, FormGroup} from '@angular/forms';

export class SomeComponent implements OnInit {

consutructor(public  fb:FormBuilder) { }

    public buildCollaboratorsGroup(fb:FormBuilder): FormGroup {
        return fb.group({
                           email:'',
                           role:''
                       });
    }

    ngOnInit() {

      public settingsForm: FormGroup = this.fb.group({
          collaborators:this.fb.array([this.buildCollaboratorsGroup(this.fb)])
      });     

      this.setFormArrayValue();
   }


    // Here I'm setting only one value if it's multiple use foreach        
    public setFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
        controlArray.controls[0].get('email').setValue('yourEmailId@gmail.com');
        controlArray.controls[0].get('role').setValue(2);
    }

    // Here removing only one value if it's multiple use foreach        
    public removeFormArrayValue() {
        const controlArray = <FormArray> this.settingsForm.get('collaborators');
        controlArray.removeAt(0);        
    }
}