Angular中点击编辑按钮如何为mat form field表单控件绑定赋值

1. 调整模板编辑按钮的触发逻辑 #

把原来直接启用表单的逻辑，改成调用自定义的编辑处理方法，同时也调整取消按钮的逻辑方便重置表单：

<!-- 原来的编辑按钮替换为这个 -->
<button mat-button *ngIf="generalForm.disabled" (click)="onEditGeneral()">
    <mat-icon>edit</mat-icon> Edit
</button>
<!-- 原来的取消按钮替换为这个 -->
<button mat-button *ngIf="generalForm.enabled" (click)="onCancelEdit()">
    Cancel
</button>

2. 组件类中添加表单填充逻辑 #

在你的组件ts文件里新增两个方法，处理编辑和取消的逻辑：

// 点击编辑时触发
onEditGeneral() {
  // 先判断用户数据是否已经拉取完成，避免空值报错
  if (!this.data) {
    this._notificationService.showError('用户数据还未加载完成，请稍后再试');
    return;
  }
  // 给表单填充数据，字段对应关系要和你表单定义、接口返回字段匹配
  this.generalForm.patchValue({
    email: this.data.emailAddress,
    fname: this.data.firstName,
    lname: this.data.lastName,
    phone: this.data.phoneNumber,
    companyName: this.data.companyName || '',
    title: this.data.title || ''
  });
  // 填充完成后再启用表单
  this.generalForm.enable();
}

// 点击取消时触发
onCancelEdit() {
  // 重置表单清空修改痕迹，下次编辑会重新拉取原始数据填充
  this.generalForm.reset();
  this.generalForm.disable();
}

3. 提交修改的逻辑参考 #

你在saveGeneralFormChanges方法里可以直接拿到表单的最新值提交：

saveGeneralFormChanges() {
  // 先做表单合法性校验（如果有加校验规则的话）
  if (!this.generalForm.valid) return;
  // 拿到表单所有字段的最新值
  const formData = this.generalForm.value;
  // 调用你的更新接口提交数据即可，这里可以按接口要求调整字段名
  console.log('要提交的修改数据：', formData);
}

初学者注意事项 #

• 优先用patchValue而不是setValue填充表单：setValue要求必须传入表单所有字段，缺一个就会报错，patchValue支持只传入部分字段，适配可选字段的场景更灵活。
• 填充数据前加this.data的非空判断，避免用户在接口请求还没返回时就点击编辑，出现空值报错。
• 取消编辑时重置表单，避免用户修改到一半取消，下次打开编辑还残留之前的修改内容。

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