检测 Angular 表单（非响应式）中的数据是否已更改答案

【问题标题】：Detect if data in an Angular form (not reactive) was changed检测 Angular 表单（非响应式）中的数据是否已更改
【发布时间】：2018-10-27 10:59:35
【问题描述】：

我有 Angular 表单（非响应式），数据绑定在 ngModel 中：

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

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

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

【问题讨论】：

使用响应式表单会更简洁，然后使用form.pristine 和form.dirty。 angular.io/guide/reactive-forms
@ibenjelloun 我不能使用响应式 from，因为我需要将值绑定到服务器上的模型。
响应式表单可以做到这一点。

标签： angular typescript angular-forms

【解决方案1】：

您可以检查脏标志，它会告诉您表单是否脏。

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

如果您更改其中的某些值，表单就会变脏。

点击此处了解更多详情：https://angular.io/guide/forms

【讨论】：

但是如果我在输入中删除 1 个符号然后再次对其进行改写（值相同，但形式已更改）怎么办？
是的，如果你改变值，它就会变脏，如果你想这样做，那么你需要编写代码，因为没有直接的方法

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以像这样尝试使用原始属性：

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

此属性检查您的表单自加载后是否发生更改。

【讨论】：

【解决方案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);
    };

【讨论】：