时间戳

首页 > 解决方案 > Angular(2 +) 检测 Angular 表单（反应式）中的数据是否已更改

javascript - Angular(2 +) 检测 Angular 表单（反应式）中的数据是否已更改

问题描述

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

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

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

标签： javascripthtmlangularangular5

解决方案

是的，有：我强烈建议您查看响应式表单的文档。

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

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

推荐阅读