Angular 13中如何通过Patch实现表格编辑时数据回填响应式表单

整个实现不需要额外依赖，直接用Angular Reactive Forms自带的patchValue方法就能完成，步骤如下：

1. 先统一表单与表格数据的字段定义 #

首先保证组件内响应式表单的FormControl名称，和你表格存储的行数据属性名一一对应，避免后续patchValue匹配不到字段，基础组件代码示例：

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

@Component({
  selector: 'app-login-form',
  templateUrl: './login-form.component.html'
})
export class LoginFormComponent implements OnInit {
  // 登录响应式表单实例
  loginForm: FormGroup;
  // 表格数据源，存储每次点击保存后提交的表单数据
  tableData: Array<{
    id: number,
    username: string,
    password: string,
    rememberLogin: boolean
  }> = [];
  // 标记当前编辑状态：存正在编辑的行id，为null时是新增状态
  currentEditingRowId: number | null = null;

  ngOnInit(): void {
    // 初始化表单，控件名和表格行字段保持一致
    this.loginForm = new FormGroup({
      username: new FormControl('', [Validators.required]),
      password: new FormControl('', [Validators.required]),
      rememberLogin: new FormControl(false)
    });
  }
}

2. 编写编辑触发方法，调用patchValue回填 #

patchValue是FormGroup原生提供的方法，和setValue的区别是它不需要你传入所有表单字段，只会更新你传入的、和控件名匹配的字段值，多余字段会自动忽略，非常适合回填场景：

/**
 * 点击表格行编辑按钮触发
 * @param row 当前点击的表格行完整数据
 */
handleRowEdit(row: {id: number, username: string, password: string, rememberLogin: boolean}): void {
  // 标记当前编辑的行id，后续保存时用来区分是新增还是更新数据
  this.currentEditingRowId = row.id;
  // 调用patchValue回填表单，直接传入对应字段值即可
  this.loginForm.patchValue({
    username: row.username,
    password: row.password,
    rememberLogin: row.rememberLogin
  });
  // 如果你能保证row里没有表单不存在的冗余字段，也可以直接写 this.loginForm.patchValue(row) 简化代码
}

3. 模板层绑定编辑事件 #

在你原来的静态表格每一行的操作列加编辑按钮，绑定点击事件传入当前行数据，模板示例：

<!-- 原有登录表单结构不需要改动 -->
<form [formGroup]="loginForm" (ngSubmit)="handleSave()">
  <div class="form-item">
    <label>用户名</label>
    <input type="text" formControlName="username">
  </div>
  <div class="form-item">
    <label>密码</label>
    <input type="password" formControlName="password">
  </div>
  <div class="form-item">
    <label>记住登录状态</label>
    <input type="checkbox" formControlName="rememberLogin">
  </div>
  <button type="submit">{{ currentEditingRowId ? '更新数据' : '保存' }}</button>
</form>

<!-- 原有静态表格，新增编辑按钮列 -->
<table border="1" cellpadding="8" style="margin-top: 20px;">
  <thead>
    <tr>
      <th>用户名</th>
      <th>密码</th>
      <th>记住登录</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let dataItem of tableData">
      <td>{{ dataItem.username }}</td>
      <td>{{ dataItem.password }}</td>
      <td>{{ dataItem.rememberLogin ? '是' : '否' }}</td>
      <td>
        <!-- 绑定编辑事件，传入当前行数据 -->
        <button (click)="handleRowEdit(dataItem)">编辑</button>
      </td>
    </tr>
  </tbody>
</table>

注意事项 #

• 如果回填时值不生效，优先检查两个点：一是表单的formControlName和传入的对象属性名是否完全一致（区分大小写），二是传入的值类型是否和控件预期匹配（比如复选框要传布尔值，不要传字符串类型的'true'/'false'）。
• 原有保存逻辑需要加个判断：如果currentEditingRowId不为null，就找到tableData里对应id的条目做更新，更新完成后把currentEditingRowId重置为null，按需清空表单即可；如果为null就走原来的新增逻辑，往tableData里push新条目。

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