Angular - 如何将多个 FormGroups 插入 FormArray？答案

【问题标题】：Angular - How to insert multiple FormGroups to a FormArray?Angular - 如何将多个 FormGroups 插入 FormArray？
【发布时间】：2018-11-06 17:13:20
【问题描述】：

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

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

【问题讨论】：

我回答了你的问题，但我实际上在想，你想要达到什么目的？也许我错过了你要找的东西？
@jburtondev 我正在从数据库中推送整个对象，所以variants 长度是可变的
谢谢。我明白你的意思，它会导致无限的 n+1 循环。所以变体长度应该保持不变吧？您只想在表单数组中添加与数组一样多的新组？
是的，我需要拥有与变体相同数量的表单组，以便为从数据库中修补值做好准备。
酷，写答案就完美了。

标签： javascript angular typescript angular-reactive-forms

【解决方案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: '' }));
}

【讨论】：