迭代Angular 2+的FormArray

Question

我有一个 FormArray 并需要遍历其中的每个成员。

我在文档中看到了 get 方法，但我不知道如何获取键或者数组长度。

如何遍历 FormArray？

- BBaysinger

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
   }
}

- Aleš Doganoc

---

我刚刚想通了。感谢您提供的额外信息。 - BBaysinger

不知道为什么这没有记录。 - BBaysinger

这个 SO 回答对我很有帮助：this.form = this.fb.group({ userIds: this.fb.array([]) }); const userIds = this.form.controls.userIds as FormArray; userIds.value.forEach(key => { this.clinet.updateContactGroup(key, this.groupId).subscribe(); });这段代码创建了一个 Reactive Form，其中包含一个空的 FormArray（即 userIds）。然后使用 FormArray 控制器从表单中获取 userIds 的值，并对其进行迭代。对于每个值，调用 this.client.updateContactGroup() 方法以更新相应的联系人组。 - G. Siganos

您可以通过formArray.controls进行迭代，请参见下面的答案。 - Ousama

Answer 2

我通过循环遍历formArray.controls来解决了这个问题:

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

- Ousama

Answer 3

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

在这种情况下，我们有一个FormArray，其中每个子项都是FormControl。

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

在模板中

*ngFor="let row of myRows"

- O-9

---

哦，顺便说一下。现在（Angular 14+），我们有Typed forms，所以这个答案有点过时了。你应该一定要开始使用它们！ - O-9

你能展示一个例子吗？ - Arj 1411

谢谢 @O-9，我也在找同样的东西。 - undefined

Answer 4

所以，我有同样的情况，在我的案例中：

adjustmentAmountArray: FormArray;

而且我需要每个FormArray项的contingencyUsed之和。

 adjustmentAmountArray.controls.reduce((acc, curr) => {
    return acc + curr.value.contingencyUsed;
 });

- Petro Darii