Question

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

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

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

Answer 1

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

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

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

但是如果您想要处理所做的更改，则不应该使用它：如果您的用户名将用户名从＆＃34; foo＆＃34;更改为＆＃34; bar＆＃34;，则返回＆＃34 ; foo＆＃34;，您的表单没有变化，因此用户不必发送所述表单。

相反，我建议你创建一个函数来比较表单与对象的orginial值。以下是如何做到这一点：

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

Answer 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，但这对保存按钮没有帮助。< / p>

Angular 5表格脏检查

2 个答案: