反应形式变化 Angular 2

Question

我有一个反应形式，我想检测其变化。例如，当用户查看产品时，会打开一个 "view product" 页面，在所有表单字段中填写该产品的详细信息。如果对表单中的任何值进行更改，我希望启用 "Save" 按钮（默认情况下禁用）。但是，如果用户撤消更改或恢复到加载时的状态，“保存”按钮将再次被禁用。

这可能吗？我见过有人这样做 angular 检测到表单更改并使表单 "dirty" 但是一旦表单变脏，将状态更改回原始状态并不容易或直观。我还读过人们在哪里将初始产品详细信息加载到本地存储中，并将当前状态的表单值 JSON 与基于此的本地存储 JSON 和 enable/disable 按钮进行比较。有没有人有首选或更好的方法？

谢谢

Answer 1

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

你需要：

initValues，起始表单值（用户交互之前）
disableSaveBtn:boolean 属性绑定到模板中的按钮：[disabled]="disableSaveBtn"
valuesMatch(val1,val2):boolean 函数将比较表单的两个模型和 return 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)
})

Answer 2

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

反应形式变化 Angular 2

Reactive Form Changes Angular 2

valuechangelistener

angular

angular-reactive-forms

angular-forms