angular - react 形式改变 Angular 2

Question

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

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

谢谢

Answer 1

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

你需要:

• initValues，起始表单值(在用户交互之前)

• disableSaveBtn:boolean 绑定(bind)到模板中按钮的属性:[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)
})