Angular中如何实现带独立行级响应式表单的Material表格

问题根因 #

当前代码仅在组件级声明了单个全局modelForm实例，所有行循环渲染时都绑定同一个FormGroup，必然出现表单状态、校验结果互相干扰的问题。核心解决思路是为每一条行数据创建专属FormGroup实例，与行数据一一映射绑定。

具体实现步骤 #

1. 改造TypeScript层逻辑 #

• 移除原有单个modelForm的声明，改用Map结构存储所有行的表单实例，以行数据唯一标识为key，避免排序、分页时表单错位
• 改造表单创建方法，支持传入行初始值完成数据回显
• 接口拉取到表格数据后，遍历每条数据生成专属表单实例存入Map

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
// ... 其他依赖导入保持原有逻辑不变

export class YourComponent implements OnInit {
  // 替换原单个modelForm，用Map存储每行独立的表单实例
  rowFormMap = new Map<string | number, FormGroup>();

  // 组件构造、其他原有属性保留
  constructor(
    private formBuilder: FormBuilder,
    // ... 其他原有依赖
  ) {}

  ngOnInit(): void {
    this.table.dataSource = new MatMultiSortTableDataSource(this.sort, this.CLIENT_SIDE);
    this.table.nextObservable.subscribe(() => { this.getDetails();});
    this.table.sortObservable.subscribe(() => { this.getDetails();});
    this.table.previousObservable.subscribe(() => {this.getDetails();});
    this.table.sizeObservable.subscribe(() => {this.getDetails();});
  }

  /**
   * 创建单行表单
   * @param initialData 行初始数据，用于回显
   */
  private createModelForm(initialData: {start?: any, end?: any} = {}): FormGroup {
    return this.formBuilder.group({
      start: [initialData.start ?? null, Validators.required],
      end: [initialData.end ?? null, Validators.required]
    });
  }

  private getDetails() {    
    this.isLoading = true;
    this.service
    .getDetails(this.filterModel)
    .pipe(finalize(() => (this.isLoading = false)))
    .subscribe({
      next: (res) => { 
        const items = res.items as Array<any>;
        // 拉取新数据前清空旧表单实例
        this.rowFormMap.clear();
        // 遍历行数据生成对应独立表单
        items.forEach((item, index) => {
          // 优先使用数据自带唯一主键作为key，无主键时临时用行索引
          const rowKey = item.id ?? index;
          this.rowFormMap.set(rowKey, this.createModelForm({
            start: item.start,
            end: item.end
          }));
        });
        this.table.data = items;
        this.table.totalElements = res.totalItemCount;   
      },
      error: (err) => {},
      complete: noop,
    });
  }

  // 其他原有业务逻辑保持不变
}

2. 改造模板层绑定 #

• 循环单元格时获取当前行数据与索引，从rowFormMap中取当前行对应的专属表单实例绑定
• 修正原代码缺失的日期范围选择器绑定
• 校验判断直接读取当前行对应表单的控件状态

<mat-table [dataSource]="table.dataSource" [@animateStagger]="{value:'50'}" matMultiSort
    (matSortChange)="table.onSortEvent()">
    <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef mat-multi-sort-header="id">
            <span class="text-left">COLUMN 1</span>
        </mat-header-cell>
        <!-- 取当前行model与索引i -->
        <mat-cell *matCellDef="let model; let i = index" class="p-2">
            <!-- 绑定当前行专属表单实例 -->
            <form [formGroup]="rowFormMap.get(model.id ?? i)">
                <div fxLayout="row" class="inspection-schedule-property-border-bottom" style="width: 99%;">
                    <div fxFlex="40" class="inspection-schedule-property-header-sub-label">
                        <mat-form-field appearance="fill" style="padding-right: 8px;" fxFlex="40">
                            <mat-label>
                                enter date
                            </mat-label>
                            <!-- 补全rangePicker绑定，否则日期选择器无法正常触发 -->
                            <mat-date-range-input [rangePicker]="picker">
                                <input matStartDate placeholder="start date" required formControlName="start">
                                <input matEndDate placeholder="end date" required formControlName="end">
                            </mat-date-range-input>
                            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                            <mat-date-range-picker #picker></mat-date-range-picker>
                            <!-- 读取当前行表单控件的错误状态 -->
                            <mat-error *ngIf="rowFormMap.get(model.id ?? i)?.get('start')?.hasError('required')">Start date is
                                required</mat-error>
                            <mat-error *ngIf="rowFormMap.get(model.id ?? i)?.get('end')?.hasError('required')">End date is
                                required</mat-error>
                        </mat-form-field>
                    </div>
                </div>
            </form>
        </mat-cell>
    </ng-container>
</mat-table>

注意事项 #

• 优先使用后端返回的行数据唯一主键（如id）作为Map的key，若仅使用行索引，在表格排序、分页、插入/删除行时会出现表单实例与行数据错位的问题
• 操作单行表单时（如单行提交、触发行校验），直接通过this.rowFormMap.get(行key)拿到对应FormGroup实例操作即可，完全不会影响其他行的表单状态
• 如果表格支持动态增删行，新增行时同步往rowFormMap中添加新的FormGroup实例，删除行时同步移除对应key的表单实例，避免内存泄漏

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