Angular中mat-checkbox绑定FormArray值显示异常问题求助

你的复选框显示与交互异常，核心问题出在表单控件绑定的索引逻辑混乱，具体两点：

1. 重复绑定formArrayName：每个<table>都设置了formArrayName="services"，Angular表单指令会将每个表格视为同一个FormArray的根容器，导致控件关联逻辑冲突。
2. 错误使用局部索引：表格内部的formGroupName用了当前表格的行索引i，而非FormArray的全局索引。比如第二个表格的第一行（i=0）会错误绑定到services[0]，而非它实际对应的services[2]，多个复选框绑定到同一FormControl，自然引发显示和交互异常。

注意：this.form.value正确是因为FormArray的数据本身没问题，只是模板绑定错了位置。

步骤1：调整表单结构，统一formArrayName位置 #

把formArrayName="services"从每个表格移到@for循环的外层父容器，确保整个FormArray只有一个根绑定：

<div [formGroup]="form">
  <!-- 外层容器绑定formArrayName -->
  <div formArrayName="services">
    @for (tableData of dataSource; track tableIndex; let tableIndex = $index) {
      <table mat-table *ngIf="tableData" [dataSource]="tableData">
        <ng-container matColumnDef="active">
          <th mat-header-cell *matHeaderCellDef></th>
          <td mat-cell *matCellDef="let element; let rowIndex = index" 
              [formGroupName]="getGlobalFormIndex(tableIndex, rowIndex)">
            全局索引: {{getGlobalFormIndex(tableIndex, rowIndex) | json}}, 
            当前值: {{services.at(getGlobalFormIndex(tableIndex, rowIndex)).get('serviceIsSelected')?.value | json}}
            <mat-checkbox formControlName="serviceIsSelected"></mat-checkbox>
          </td>
        </ng-container>

        <!-- 补充表头和行渲染指令 -->
        <tr mat-header-row *matHeaderRowDef="['active']"></tr>
        <tr mat-row *matRowDef="let row; columns: ['active'];"></tr>
      </table>
    }
  </div>
</div>

步骤2：添加全局索引计算方法 #

在组件中实现getGlobalFormIndex，计算当前行对应的FormArray全局索引：

// 新增services的getter，方便模板访问
get services(): FormArray {
  return this.form.get('services') as FormArray;
}

// 计算当前行在FormArray中的全局索引
getGlobalFormIndex(tableIndex: number, rowIndex: number): number {
  let preTableTotal = 0;
  // 累加当前表格之前所有表格的元素数量
  for (let i = 0; i < tableIndex; i++) {
    preTableTotal += this.dataSource[i]?.length || 0;
  }
  return preTableTotal + rowIndex;
}

步骤3：修正@for的trackBy逻辑 #

把原来的track dataSource改成track tableIndex或track tableData，确保Angular正确跟踪循环项：

@for (tableData of dataSource; track tableIndex; let tableIndex = $index) {
  ...
}

可选：优化FormGroup创建逻辑 #

你当前在FormGroup中展开了整个service对象，会把不需要的属性也加入表单，建议只保留需要绑定的控件：

const groupOfServices = this._formBuilder.group({
  serviceIsSelected: new FormControl({ 
    value: service.serviceIsSelected, 
    disabled: service.typeOfService === 'mandatory' 
  }),
  // 仅添加需要的其他控件，比如：
  amount: new FormControl(amountValue)
});

完成以上修改后，每个复选框都会正确绑定到FormArray中对应的FormControl，显示状态和交互就能和this.form.value保持一致了。

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