检测表单中的数据是否已更改

Question

我有Angular形式(不反应),在ngModel中绑定数据:

 <form #form="ngForm">
  <input [(ngModel)]="user.name">
  <input [(ngModel)]="user.color">

  <button type="submit">Save</button>
 </form>

如果绑定数据未更改,如何禁用提交按钮？

Answer 1

这样做,检查脏标志,告诉表格是否脏

 <button type="submit"  [disabled]="!form.dirty">Save</button>

如果您更改其中的某个值,表单将变脏.

点击此处查看详细信息:https://angular.io/guide/forms

Answer 2

根据你的评论“但是如果我删除输入中的 1 个符号然后再次写入它（值相同，但形式已更改）怎么办？” 我建议这个解决方案。

总体思路是将表单的初始值存储为单独的对象（只是克隆它）。然后创建一个布尔函数，它只需迭代键值并将更新数据与初始数据进行比较。之后，只需将此函数的结果绑定到您的提交按钮[disabled]="yourCheckMethod(form.value)“。