Question

我有一个反应形式，我想检测更改。例如，当用户查看产品时，查看产品＆＃34;页面打开，填写所有表单字段以及该产品的详细信息。如果对表单中的任何值进行了更改，我想要＆＃34;保存＆＃34;按钮被启用（默认情况下禁用）。但是，如果用户撤消更改或恢复为加载时的状态，则将再次禁用“保存”按钮。

这可能吗？我已经看到有些人这样做，角度检测到形状变化并使形状“肮脏”。但是一旦表格弄脏了，将状态改回原始状态并不容易或直观。我还阅读了人们将初始产品详细信息加载到本地存储中的位置，并将当前状态的表单值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}.`;
  });
}

反应形式改变角度2

2 个答案: