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

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

您可以使用这样的pristine属性尝试：

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

此属性检查表单自加载后是否已更改。

Answer 3

根据您的评论“但是，如果我删除输入中的1个符号然后再次对其进行加权（值相同，但是格式已更改）怎么办？”我建议这种解决方案。

通常的想法是将表单的初始值存储为单独的对象（只是克隆它）。然后创建一个布尔函数，该函数简单地遍历键值并将比较的数据与初始数据进行比较。之后，只需将此函数的结果绑定到您的提交按钮[disabled]="yourCheckMethod(form.value)“。

Answer 4

我遇到过没有表单的情况，将其调整为此处提出的问题，尽管我的句柄是单击而不是禁用按钮。带有 TypeScript 的 Angular 7：

    <!-- user.component.html -->
    .....
    .....
    <div>
      <input [(ngModel)]="user.name">
      <input [(ngModel)]="user.color">
      <button (click)="save()">Save</button>
    </div>
  
    // user.component.ts
    .....
    .....
    lastObjectHash: string;
    User: user = { name: "joe", color: "blue"};  // with name and color on type User 
    
    // Not really a hash, but let's call it that
    getObjectHash(): Promise<string> {
      return util.encodeBase64(JSON.stringify(this.user));
    }

    ngAfterViewInit(): void {
      this.getObjectHash().then(value => this.lastObjectHash = value);
    }

    save() {
      this.getObjectHash().then(value => { 
        if (this.lastObjectHash === value) {
          alert("You did not change name or color");
          return;
        }
        // Save user changes....
        this.userService.save(this.user);  // Or whatever...
      }); 
    }

    // util.ts
    // Just a utility function to BASE64 encode
    .....
    .....
    export const encodeBase64 = async (textString) => {
      return btoa(textString);
    };