反应形态改变角2

Question

我有一个要检测更改的反应性表单。例如，当用户查看产品时，会打开一个“查看产品”页面，在所有表单字段中填写该产品的详细信息。如果对表单中的任何值进行了更改，我希望启用"Save“按钮(默认情况下是禁用的)。但是，如果用户取消更改或恢复到加载时的状态，则将再次禁用Save按钮。

这个是可能的吗？我见过一些人用角度检测形状的变化，使表单变得“脏”，但一旦表单被污染，就不容易或直观地将状态变为原始状态。我还阅读了人们将初始产品详细信息加载到本地存储中的位置，并将当前状态的表单值JSON与本地存储JSON进行比较，并在此基础上启用/禁用按钮。有没有人喜欢或更好的方法？

谢谢

Answer 1

当初始数据到达时，将其本地保存为组件属性。然后，您可以随时将其与表单的当前值进行比较，以确定是否发生了更改。

你需要：

• initValues，起始表单值(在用户交互之前)
• disableSaveBtn:boolean属性，该属性与：[disabled]="disableSaveBtn"绑定到模板中的按钮。
• valuesMatch(val1,val2):boolean函数，它将比较表单的两个模型，如果它们匹配，则返回true。

每次表单值更改时进行比较。由于您使用的是反应性表单，所以您只需听一听可观察到的valueChanges

// 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)
})

Answer 2

基于BeetleJuice提到的内容：

找出什么是脏的: JSON比较适用于深嵌套的对象，而且由于浏览器需要观察的所有可观察性，因此比单独跟踪所有表单控件花费更少。

  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}.`;
  });
}