Angular中使用*ngIf时FormArray无法正确加载控件问题

我开发了一款可根据行列输入生成的动态表格组件，当表格默认显示或使用[hidden]属性隐藏时表现正常，但使用*ngIf时出现异常。每次添加新行时控制台会报错，控件加载不正确，点击控件后会自动修正，列控件恢复正常。请问这是Angular的问题还是我处理方式有误？

异常现象 #

• 点击添加行按钮时：出现覆盖整行的文本框
  
  
• 点击文本框后：恢复正常显示
  

组件代码 #

TypeScript代码 #

export class DynamicTableComponent implements OnInit {
  @Input() columns: Column[] = [];
  rows: string[];

  tableForm: FormGroup;
  formArray: FormArray = this.fb.array([]);

  constructor(private readonly fb: FormBuilder) {}

  ngOnInit(): void {
    this.tableForm = this.fb.group({});
    this.tableForm.addControl('rows', this.formArray);
  }

  getData(idx: number): FormArray {
    return this.formArray.at(idx) as FormArray;
  }

  getType(formControl: AbstractControl): string {
    return formControl.get('type')?.value as string;
  }

  addRow(): void {
    const row = this.fb.array([]);

    this.columns.forEach((col) => {
      const fieldValue = 'Placeholder text';
      row.push(
        this.fb.group({
          columnName: col.name,
          type: col.type,
          value: fieldValue,
        })
      );
    });

    this.formArray.push(row);
  }
}

HTML模板 #

<form id="dynamic-table" [formGroup]="tableForm">
  <table>
    <tbody formArrayName="rows">
      <ng-container *ngIf="formArray">
        <ng-container
          *ngFor="let row of formArray.controls; let i = index"
          [formGroupName]="i">
          <tr [id]="'row-' + i">
            <ng-container
              *ngFor="
                let cell of getData(i).controls;
                let j= index"
              [formGroupName]="j">
              <ng-container [ngSwitch]="getType(cell)">
                <td *ngSwitchCase="'text'" [id]="'col-' + j">
                  <pre> A text field component.</pre>
                </td>
                <td *ngSwitchCase="'tickBox'" [id]="'col-' + j">
                  <pre>A checkbox component.</pre>
                </td>
              </ng-container>
            </ng-container>
          </tr>
        </ng-container>
      </ng-container>
    </tbody>
  </table>
</form>

问题分析与解决方案 #

这不是Angular的问题，是表单绑定逻辑和*ngIf使用方式存在疏漏。

核心问题 #

1. *ngIf延迟渲染导致表单绑定不一致：*ngIf会在条件满足时才渲染DOM，此时表单控件绑定需要和DOM渲染完全同步，原代码中表单结构的嵌套绑定不够清晰，导致DOM渲染时控件关联出错。
2. 模板中频繁调用方法触发变更检测异常：getData(i)和getType(cell)在模板中每次变更检测都会执行，Angular无法稳定追踪表单数组的状态变化，添加新行时控件更新不及时。
3. 表单嵌套结构绑定缺失：每行的单元格数组没有明确的formArrayName绑定，直接用formGroupName导致表单控件层级混乱。

修复方案 #

1. 调整表单结构与绑定

修改addRow方法，将每行包装为包含cells数组的FormGroup，明确层级：

addRow(): void {
  const cells = this.fb.array([]);

  this.columns.forEach((col) => {
    const fieldValue = 'Placeholder text';
    cells.push(
      this.fb.group({
        columnName: col.name,
        type: col.type,
        value: fieldValue,
      })
    );
  });

  // 每行是包含cells数组的FormGroup
  this.formArray.push(this.fb.group({ cells }));
}

2. 修正模板绑定逻辑

移除多余的*ngIf="formArray"，为每行的单元格数组添加formArrayName="cells"，直接访问控件属性减少方法调用：

<form id="dynamic-table" [formGroup]="tableForm">
  <table>
    <tbody formArrayName="rows">
      <ng-container
        *ngFor="let row of formArray.controls; let i = index"
        [formGroupName]="i">
        <tr [id]="'row-' + i" formArrayName="cells">
          <ng-container
            *ngFor="let cell of row.get('cells').controls; let j= index"
            [formGroupName]="j">
            <ng-container [ngSwitch]="cell.get('type')?.value">
              <td *ngSwitchCase="'text'" [id]="'col-' + j">
                <pre> A text field component.</pre>
              </td>
              <td *ngSwitchCase="'tickBox'" [id]="'col-' + j">
                <pre>A checkbox component.</pre>
              </td>
            </ng-container>
          </ng-container>
        </tr>
      </ng-container>
    </tbody>
  </table>
</form>

3. 解释[hidden]与*ngIf的差异

[hidden]仅通过CSS隐藏DOM，控件绑定从组件初始化时就已完成，不会出现同步问题；而*ngIf会动态创建/销毁DOM，必须确保表单结构与DOM绑定完全匹配，否则会出现渲染异常。

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