Angular（2 +）检测Angular形式（反应性）中的数据是否已更改[重复]答案

【问题标题】：Angular(2 +) Detect if data in an Angular form (reactive) was changed [duplicate]Angular（2 +）检测Angular形式（反应性）中的数据是否已更改[重复]
【发布时间】：2018-10-28 13:02:14
【问题描述】：

我有一些表单和按钮来保存它。只有在表单上有未保存的更改（输入）时才必须启用该按钮。

<form>
    <div>
    ... (inputs)
        <span (click)="save()"> Save </span>
    </div>
</form>

Angular 5 中是否有一些用于表单脏检查的内置机制？实现此方案的最简单方法是什么？

【问题讨论】：

您可以使用 angulars 表单控件。更多信息在docs

标签： javascript html angular angular5

【解决方案1】：

是的：我强烈建议您查看 documentation of reactive forms。

除此之外，内置机制仅用于检查表单的状态：

touched 表示用户已输入表单
dirty / !pristine 表示用户进行了修改

但是，如果您想处理所做的更改，则不应使用它：如果您的用户名将其用户名从“foo”更改为“bar”，然后又变回“foo”，那么您的表单中没有任何更改，所以用户不必发送上述表格。

相反，我建议您创建一个函数，将表单与对象的原始值进行比较。这是你可以做到的：

// Creates a reference of your initial value
createReference(obj: any) {
  this.reference = Object.assign({}, obj);
}

// Returns true if the user has changed the value in the form
isDifferent(obj: any, prop: string) {
  return this.reference[prop] !== obj[prop];
}

submitForm(form: any) {
  // ... Business code ...
  hasChanges = false;
  for (let prop in form) {
    if (this.isDifferent(form, prop)) { hasChanges = true; }
  }
  // If no changes, cancel form submition
  if (!hasChanges) { return; }
}

【讨论】：

这个解决方案可以在 ngOnChanges() 期间应用，而不是提交点击。反应式表单包含一个 valueChanges() 方法，该方法返回一个可观察的，如下所述：alligator.io/angular/reactive-forms-valuechanges。文章写于 2017 年。

【解决方案2】：

当您使用响应式表单 (https://angular.io/guide/reactive-forms) 时，表单组和控件上有一个属性 pristine 和一个属性 dirty。应该看起来像这样：

<form form-group="myGroup">
  <div>
    <input type="text" formControlName="ctrl1">
    ... (further inputs)

    <span><button (click)="save()" [disabled]="myGroup.pristine"> Save </button></span>
  </div>
</form>

和 .ts 文件：

import { Component, .... } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({...})
export class YourFancyComponent {
  myGroup: FormGroup;
  constructor(private( formBuilder: FormBuilder) {
      this.myGroup = this.formBuilder.group({
        'ctrl1': 'defValue',
        'ctrl2': 'defaultValue2'
      });
  }
}

对于模板驱动的表单（根据 https://angular.io/guide/forms#track-control-state-and-validity-with-ngmodel），修改后的输入控件的 css 类从 ng-pristine 更改为 ng-dirty，但这对保存按钮没有帮助。

【讨论】：