Question

我正在尝试在加载组件之前将FormGroups插入FormArray中。这是我的FormGroup：

/*constructor (private fb: FormBuilder) {}*/
this.productGroup = this.fb.group({
 name: ['', Validators.compose([Validators.required, Validators.maxLength(80)])],
  variants: this.fb.array([
    this.fb.group({
      _id: '',
      type: '',
      options: ''
    })
  ]),
});

这就是我在variants FormArray中插入FormGroup的方式：

const variants = <FormArray>this.productGroup.controls.variants;
variants.push(this.fb.group({ _id: '', type: '', options: '' }));

问题是，variants.length的值可以为3、4，依此类推。如何处理？

// variants.lenght == 2
variants.push(this.fb.group({ _id: '', type: '', options: '' }));
variants.push(this.fb.group({ _id: '', type: '', options: '' }));

// variants.lenght == 3
variants.push(this.fb.group({ _id: '', type: '', options: '' }));
variants.push(this.fb.group({ _id: '', type: '', options: '' }));
variants.push(this.fb.group({ _id: '', type: '', options: '' }));

Answer 1

FormArray方法仅接受一个控件作为参数，因此一次只能添加一个FormGroup：https://github.com/angular/angular/blob/7.0.2/packages/forms/src/model.ts#L1582-L1593

如果要添加多个FormGroup项，则可以使用for循环遍历所有控件并将它们逐一推送。

使用此：

const dataBaseVariantsLength = objectFromDataBaseLength;
for (let i = 0; i < dataBaseVariantsLength; i++) {
  variants.push(this.fb.group({ _id: '', type: '', options: '' }));
}

角度-如何将多个FormGroup插入到FormArray？

1 个答案: