Angular8行内编辑场景下无输入修改时禁用Save按钮的实现咨询

云上老周

2026-9-26

Angular 行内编辑保存按钮状态控制实现方案

要实现未修改时禁用Save按钮、任意字段修改后启用按钮的需求，可通过保存编辑前原始值+实时对比当前值的方式实现，具体修改如下：

步骤1：新增存储原始值的变量

在TS文件中新增变量，用于存储当前正在编辑行的原始数据：

// 存储正在编辑行的原始数据，用于对比是否有修改
originalContact: any = null;

步骤2：编辑触发时保存原始值

修改编辑触发方法onEditEvent，点击编辑按钮时对当前行数据做深拷贝存为原始值：

onEditEvent(contact: any) {
  // 深拷贝避免引用关联导致对比失效
  this.originalContact = JSON.parse(JSON.stringify(contact));
  // 保留原有其他编辑逻辑
}

步骤3：完善禁用判断逻辑

重写disableSubmit方法，对比当前编辑行数据与原始值是否存在差异：

public disableSubmit(): boolean {
  // 无正在编辑的行直接禁用按钮
  if (!this.originalContact || this.editableRow === null) {
    return true;
  }
  // 取当前正在编辑行的最新数据
  const currentContact = this.yearManagement.find(item => item.id === this.editableRow);
  // 配置需要校验是否修改的字段，后续新增字段直接往数组加即可
  const checkFields = ['policyTypeName', 'quotes', 'policyCT', 'writtenPremium'];
  // 所有字段都未修改返回true（禁用按钮），有任意字段修改返回false（启用按钮）
  return checkFields.every(field => this.originalContact[field] === currentContact[field]);
}

步骤4：操作结束清空原始值

在关闭编辑、保存成功的回调中清空原始值，避免影响下一次编辑判断：

onCloseEvent(contact: any) {
  this.originalContact = null;
  this.editableRow = null;
  // 保留原有其他关闭逻辑
}

onSave(contact: any) {
  // 保存成功后清空
  this.originalContact = null;
  this.editableRow = null;
  // 保留原有其他保存逻辑
}