javascript - 以 react 形式设置 Angular 2 FormArray 值？

Question

这里已经有一个类似的问题 ( Setting initial value Angular 2 reactive formarray ) 但我对答案不满意或者可能正在寻找其他解决方案。

我认为 FormArray 的全部意义在于传递对象数组，它应该创建相同数量的组件。但是在上面的例子中，如果你查看提供的 plunker ，即使在提供了两个 Addresses 对象之后，一个 Address 也被创建了，因为它的空白版本已经在 ngOnInit() 中创建了。

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

Answer 1

要设置和删除表单数组中的值，请引用以下代码。给定的代码仅供您引用，请相应地调整您的代码。

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

export class SomeComponent implements OnInit {

consutructor(public  fb:FormBuilder) { }

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

      this.setFormArrayValue();
   }

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


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