我有一个想要检测更改的反应式表单。例如，当用户查看产品时，会打开一个“查看产品”页面，在所有表单字段中填写该产品的详细信息。如果对表单中的任何值进行了更改，我希望启用“保存”按钮（默认情况下禁用）。但是，如果用户撤消更改或恢复到加载时的状态，“保存”按钮将再次被禁用。
这可能吗？我见过一些人这样做，其中 angular 检测到表单更改并使表单“变脏”，但是一旦表单被弄脏，将状态更改回原始状态并不容易或直观。我还阅读了人们在哪里将初始产品详细信息加载到本地存储中，并将当前状态的表单值 JSON 与本地存储 JSON 进行比较，并基于此启用/禁用按钮。有没有人有首选或更好的方法？
谢谢
【问题讨论】：
标签： angular valuechangelistener angular-reactive-forms angular-forms
以 BeetleJuice 提到的内容为基础：
找出什么是脏的：JSON stringify 比较适用于深度嵌套的对象，并且似乎比单独跟踪所有表单控件更便宜，因为浏览器需要查看所有将创建的可观察对象。
patchValueLocation(yourFormValues){
this.form.patchValue(yourFormValues);
this.createReference(this.formGroup.value)
this.loading = false;
}
private createReference(obj: any){
this.reference = JSON.stringify(obj)
}
ngOnInit() {
this.form.valueChanges.subscribe(newValues=> {
if(!this.loading){
const hasChanges = !( JSON.stringify(newValues) === this.reference );
this.dirty = hasChanges;
}
})
}
您也可以收听本文档中显示的单个表单控件。
https://alligator.io/angular/reactive-forms-valuechanges
ngOnInit(): void {
this.myForm.get('name').valueChanges.subscribe(val => {
this.formattedMessage = `My name is ${val}.`;
});
}
【讨论】：
当初始数据到达时，将其作为组件属性保存在本地。 然后，您可以随时将其与表单的当前值进行比较，以确定是否发生了变化。
你需要：
initValues，起始表单值（在用户交互之前）
disableSaveBtn:boolean 绑定到模板中按钮的属性：[disabled]="disableSaveBtn"
valuesMatch(val1,val2):boolean 函数将比较表单的两个模型，如果匹配则返回 true
每次表单值更改时进行比较。由于您使用的是响应式表单，因此您可以只听valueChanges observable
// will emit every time a form control value is changed
this.form.valueChanges.subscribe(newValues => {
// disable the button if new value matches initial value
this.disableSaveBtn = this.valuesMatch(newValues, initValues)
})
【讨论】：