Angular中如何将FormGroup推入FormArray？动态表单实现求助

问题核心分析 #

你遇到的两个错误本质是表单结构与模板绑定不匹配：

• 初始将details定义为FormGroup，调用push自然报错（FormGroup无此方法）；
• 改为FormArray后，模板未指定表单组的索引绑定，导致Angular无法定位控件路径。

以下是完整的修正方案：

1. 修正表单初始化代码 #

取消单独维护的_detailRowNumber数组，直接基于FormArray管理动态行，同时封装创建表单组的方法避免复用同一实例（否则所有行值会同步）：

import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';

// 封装创建单个detail表单组的方法
private createDetailGroup(): FormGroup {
  return this.fb.group({
    label: new FormControl(''),
    description: new FormControl('')
  });
}

// 初始化主表单，details为FormArray并默认添加一行
formMain = this.fb.group({
  details: this.fb.array([this.createDetailGroup()])
});

// 定义getter，方便模板中快速获取FormArray（可选但推荐）
get detailsArray(): FormArray {
  return this.formMain.get('details') as FormArray;
}

2. 调整HTML模板绑定 #

模板需绑定FormArray的controls，并为每一行指定formGroupName，确保Angular能正确定位控件：

<div formArrayName="details">
  <!-- 直接遍历FormArray的控件，无需额外维护行号数组 -->
  <div *ngFor="let detail of detailsArray.controls; index as i" [formGroupName]="i">
    <mat-form-field appearance="fill">
      <mat-label>Label of a detail</mat-label>
      <input matInput type="text" formControlName="label">
    </mat-form-field>

    <mat-form-field appearance="fill">
      <mat-label>Description of a detail</mat-label>
      <input matInput type="text" formControlName="description">
    </mat-form-field>

    <button type="button" *ngIf="detailsArray.length > 1" (click)="removeDetailRow(i)" 
            mat-fab color="primary" aria-label="Remove row">
      <mat-icon>remove</mat-icon>
    </button>

    <button type="button" (click)="addDetailRow()" 
            mat-fab color="primary" aria-label="Add new row">
      <mat-icon>add</mat-icon>
    </button>
  </div>
</div>

3. 实现新增/删除行方法 #

直接操作FormArray的API完成动态行的增减：

addDetailRow(): void {
  this.detailsArray.push(this.createDetailGroup());
}

removeDetailRow(index: number): void {
  this.detailsArray.removeAt(index);
}

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