Angular中如何将FormArray对应索引的FormGroup绑定到子组件？

1. 父组件表单初始化 #

首先在父组件中构建包含三个 FormArray 的表单，每个 FormArray 初始化5个对应子组件结构的 FormGroup：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  parentForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.parentForm = this.fb.group({
      formArray1: this.fb.array(this.buildFormArray1Groups(5)),
      formArray2: this.fb.array(this.buildFormArray2Groups(5)),
      formArray3: this.fb.array(this.buildFormArray3Groups(5))
    });
  }

  // 构建对应子组件1的FormGroup集合
  private buildFormArray1Groups(count: number): FormGroup[] {
    return Array.from({ length: count }, () => 
      this.fb.group({
        fieldA: ['', Validators.required],
        fieldB: ['']
      })
    );
  }

  // 构建对应子组件2的FormGroup集合
  private buildFormArray2Groups(count: number): FormGroup[] {
    return Array.from({ length: count }, () => 
      this.fb.group({
        fieldC: [0, Validators.min(0)],
        fieldD: ['']
      })
    );
  }

  // 构建对应子组件3的FormGroup集合
  private buildFormArray3Groups(count: number): FormGroup[] {
    return Array.from({ length: count }, () => 
      this.fb.group({
        fieldE: [false],
        fieldF: ['', Validators.email]
      })
    );
  }

  // 提供获取三个FormArray的快捷访问器
  get formArray1(): FormArray {
    return this.parentForm.get('formArray1') as FormArray;
  }

  get formArray2(): FormArray {
    return this.parentForm.get('formArray2') as FormArray;
  }

  get formArray3(): FormArray {
    return this.parentForm.get('formArray3') as FormArray;
  }
}

2. 子组件接收 FormGroup #

三个子组件各自通过 @Input() 接收父组件传入的对应 FormGroup，直接复用已实现的控件和验证逻辑：

以子组件1为例：

import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'app-child-1',
  templateUrl: './child-1.component.html'
})
export class Child1Component {
  @Input() childForm: FormGroup;
}

子组件1模板（已包含控件和验证提示）：

<div [formGroup]="childForm">
  <label>字段A：</label>
  <input formControlName="fieldA">
  <span *ngIf="childForm.get('fieldA')?.invalid && childForm.get('fieldA')?.touched">
    此字段为必填项
  </span>

  <label>字段B：</label>
  <input formControlName="fieldB">
</div>

其他两个子组件同理，只需调整绑定的控件名和验证逻辑即可。

3. 父组件模板循环绑定 #

在父组件模板中循环5次，利用循环索引 i 取出三个 FormArray 中对应位置的 FormGroup，分别传给对应的子组件：

<form [formGroup]="parentForm">
  <div *ngFor="let _ of Array(5); let i = index" class="form-group">
    <h4>第 {{i + 1}} 组</h4>
    <!-- 绑定formArray1的第i个FormGroup到子组件1 -->
    <app-child-1 [childForm]="formArray1.at(i)"></app-child-1>
    <!-- 绑定formArray2的第i个FormGroup到子组件2 -->
    <app-child-2 [childForm]="formArray2.at(i)"></app-child-2>
    <!-- 绑定formArray3的第i个FormGroup到子组件3 -->
    <app-child-3 [childForm]="formArray3.at(i)"></app-child-3>
  </div>
</form>

核心逻辑说明 #

• 循环时通过 index 定位到 FormArray 中对应索引的 FormGroup，调用 FormArray.at(i) 方法获取目标组
• 子组件通过 @Input() 接收父组件传递的 FormGroup 后，直接绑定到自身表单即可，无需重复创建表单结构
• 如果后续需要调整每组的数量，只需修改父组件中构建 FormGroup 集合的 count 参数，循环逻辑会自动适配

内容的提问来源于stack exchange，提问作者Sarath