Angular中实现提交按钮随表单值变更/还原启用与禁用

问题核心在于Angular的FormGroup.dirty属性仅标记表单是否被修改过，而非当前值是否与初始值一致。只要用户修改过表单，哪怕后续把值改回初始状态，dirty都会保持true，导致按钮无法重新禁用。

解决方案：对比当前值与初始值 #

我们需要通过对比表单当前值和初始化时的原始值，来判断是否启用按钮，具体步骤如下：

1. 保存表单初始值
   在组件初始化表单后，立即保存表单的原始初始值：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  createForm: FormGroup;
  private initialFormValue: any;

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.createForm = this.formBuilder.group({
      formText: ['hello', Validators.required],
      list: [10, Validators.required],
    });
    // 保存表单初始化时的原始值
    this.initialFormValue = this.createForm.getRawValue();
  }
}

2. 添加值对比方法
   实现一个方法，用于判断当前表单值是否与初始值不同：

// 判断表单值是否发生实质性变更
isFormChanged(): boolean {
  // 用JSON.stringify做深对比，适用于表单值为基本类型的场景
  return JSON.stringify(this.createForm.getRawValue()) !== JSON.stringify(this.initialFormValue);
  
  // 如果表单包含复杂类型（如日期对象），建议使用深对比工具，比如lodash.isEqual
  // return !isEqual(this.createForm.getRawValue(), this.initialFormValue);
}

3. 修改按钮禁用条件
   将按钮的disabled绑定条件从依赖dirty改为依赖值对比结果：

<form [formGroup]="createForm">
  <label for="email">formText</label>
  <input type="email" class="form-control" formControlName="formText" />
  <br />
  <label>List</label>
  <input type="email" class="form-control" formControlName="list" />
</form>
<!-- 当表单无效 或 值未发生实质性变更时禁用按钮 -->
<button [disabled]="createForm.invalid || !isFormChanged()">Submit</button>
<h3>{{ someError }}</h3>

补充说明 #

• 避免使用pristine/dirty：这两个属性仅记录表单是否被触摸修改过，无法反映值是否与初始状态一致。
• 深对比工具：如果表单值包含日期、对象等复杂类型，JSON.stringify可能会出现判断不准确的情况，此时推荐使用lodash.isEqual这类专业的深对比函数。

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