Angular 6响应式表单：如何存储初始值及检测表单变更？

架构老林

2026-5-11

嘿，针对你在Angular 6响应式表单里碰到的这两个问题，我给你分享下项目里常用的解决方案，都是经过实践验证的：

问题1：正确存储表单初始值并实现保存/取消功能

首先你要明白，直接赋值初始值会因为引用类型的特性导致后续表单修改连带着初始值一起变，所以必须深拷贝一份初始值单独存储。具体步骤如下：

初始化表单并保存初始值
不管是从原数据加载还是预填完成后，都要深拷贝当前表单的值作为初始状态。如果是简单数据结构，用JSON.parse(JSON.stringify())就足够；如果是复杂对象（比如嵌套表单组、自定义类实例），可以用lodash的cloneDeep方法。

import { FormBuilder } from '@angular/forms';
// 假设你已经注入了FormBuilder

// 1. 先初始化表单（这里用你的原数据或预填值填充）
this.myForm = this.fb.group({
  valueToPrefill: [prefillValue] // 这里直接用你的预填值初始化，或者从原数据取
  // 其他表单控件...
});

// 2. 深拷贝保存初始值
this.formInitialValue = JSON.parse(JSON.stringify(this.myForm.value));

如果是先初始化表单再通过setValue预填，那就在预填完成后再保存初始值：

this.myForm.get("valueToPrefill").setValue(prefillValue);
this.formInitialValue = JSON.parse(JSON.stringify(this.myForm.value));

保存按钮逻辑
点击保存时，把当前表单的值同步到你的原数据，同时更新初始值（避免下次取消时回到旧状态），最后标记表单为pristine让按钮回到禁用状态：

onSave() {
  // 同步表单值到原数据（根据你的实际数据结构调整）
  Object.assign(this.originalData, this.myForm.value);
  // 更新初始值，确保后续编辑的基准是最新保存的内容
  this.formInitialValue = JSON.parse(JSON.stringify(this.myForm.value));
  // 标记表单为未修改状态
  this.myForm.markAsPristine();
}

取消按钮逻辑
用保存的初始值重置表单，同时重置表单状态：

onCancel() {
  // 重置表单值到初始状态，reset方法会同时重置表单状态为pristine
  this.myForm.reset(this.formInitialValue);
  // 如果不想完全重置状态，也可以用patchValue后手动标记pristine：
  // this.myForm.patchValue(this.formInitialValue);
  // this.myForm.markAsPristine();
}

问题2：解决修改后恢复原值时保存按钮仍禁用的问题

Angular表单的dirty状态只要用户触碰过控件就会变为true，哪怕改回原值也不会自动变回pristine。所以我们不能只依赖表单的内置状态，必须对比当前表单值和初始值来判断是否有实际变更。

写一个对比方法
在组件里定义一个方法，用来检查当前表单值和初始值是否一致：

// 简单数据结构用JSON.stringify对比
hasFormChanged(): boolean {
  return JSON.stringify(this.myForm.value) !== JSON.stringify(this.formInitialValue);
}

// 如果是复杂数据结构，推荐用lodash的isEqual做深度对比（需要先安装lodash）
// import { isEqual } from 'lodash';
// hasFormChanged(): boolean {
//   return !isEqual(this.myForm.value, this.formInitialValue);
// }

修改模板里的按钮禁用条件
把原来只依赖myForm.pristine的条件，改成结合表单有效性和是否有实际变更：
```
<button type="button" 
        (click)="onSave()" 
        [disabled]="!myForm.valid || !hasFormChanged()">
  保存
</button>
```

这样一来，哪怕用户修改后又改回原值，hasFormChanged()会返回false，保存按钮依然保持禁用状态，完全符合你的需求。

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