迭代 Angular 2+ FormArray

Question

我有一个 FormArray，需要遍历它的每个成员。

我看到 the docs 中有一个 get 方法，但我不知道从哪里获取密钥，甚至不知道长度。

如何迭代 FormArray？

Answer 1

您在 FormArray 中有一个属性 controls，它是 AbstractControl 对象的数组。查看 FormArray 的特定文档，您会发现它们也像您发布的 FormControl 一样继承自 AbstractControl。

请注意，在控件数组中，除了 FormControl 对象之外，您还可以在 FormArray 或 FormGroup 对象中包含对象，因为可以嵌套组或数组。

这是一个简单的例子：

for (let control of formArray.controls) {
   if (control instanceof FormControl) {
      // is a FormControl
   }
   if (control instanceof FormGroup) {
      // is a FormGroup  
   }
   if (control instanceof FormArray) {
      // is a FormArray
   }
}

Answer 2

我通过遍历 formArray.controls 解决了这个问题：

  formArray.controls.forEach((element, index) => {
    ...
  });

Answer 3

如果有人需要帮助在模板中迭代它们（就像我一样），你可以这样做。

在这种情况下，我们有 FormArray，其中每个 child 是 FormControl

get myRows(): FormControl[] {
    return (this.<your form group>.get('<field name>') as FormArray).controls as FormControl[];
  }

并在模板中

*ngFor="let row of myRows"

迭代 Angular 2+ FormArray

Iterate Angular 2+ FormArray

angular

angular-reactive-forms