Disable/enable 基于值变化的按钮 Angular

Question

我有一个包含不同输入字段的表单，包括 input[type="file"] 和 input[type="checkbox"]。我通过从后端获取请求获取输入表单字段的值，并将它们存储在公司变量中。

ngOnInit(): void {
    this.generateForm();

    this.companyService.getCompany().subscribe((response: Company) => {
      this.company = response;

      this.settingsForm.setValue({
        ...this.company,
        certificateUrl: [this.company.certificateUrl],
      });
    });
  }

我首先生成表单，然后从获取请求中获取我的响应，这样我就可以将我的公司变量设置为响应，并根据我得到的值设置表单的值。问题是我想在我的表单有效和更改时启用 html 中的按钮。因此，当未根据先前值进行更改时，应禁用按钮。例如：如果我们有值为 'myName' 的字段名称并且我在输入中键入 'my' 按钮应该被启用，因为与以前的值相比发生了变化。如果我返回 'myName' 它应该被禁用，因为值与之前的值相同。如果字段为空并且用户输入某些内容并且对于字段类型文件和复选框，也会发生同样的情况。

这就是我目前正在尝试的方式。

inputChanged: boolean = false

ngOnInit() {
    this.settingsForm.valueChanges.subscribe((currentValue) => {
      if (JSON.stringify(currentValue) !== JSON.stringify(this.company)) {
        this.inputChanged = true;
      } else {
        this.inputChanged = false;
      }
    });
}
////

 <button
          [disabled]="!inputChanged || !settingsForm.valid"
          class="btn btn-md text-light"
        >
          Save
        </button>

这是我的表格

<form class="mt-4" [formGroup]="settingsForm" (ngSubmit)="saveChanges()">
    <div class="row">
      <div class="col-6">
        <div class="form-group">
          <label class="form-label fw-bold">ID</label>
          <input
            formControlName="identificationNumber"
            type="text"
            class="form-control"
          />
        </div>
        <div class="form-group d-none">
          <label class="form-label fw-bold">Id</label>
          <input formControlName="id" type="text" class="form-control" />
        </div>
        <div class="form-group d-none">
          <label class="form-label fw-bold">Country</label>
          <input formControlName="country" type="text" class="form-control" />
        </div>

        <div class="form-group">
          <label class="form-label fw-bold"
            >P</label
          >
          <input formControlName="tin" type="text" class="form-control" />
 
        </div>
        <div class="form-group">
          <label class="form-label fw-bold">Name</label>
          <input formControlName="name" type="text" class="form-control" />
        </div>
      </div>
      <div class="col-6">
        <div class="form-group">
          <label class="form-label fw-bold">City</label>
          <input formControlName="city" type="text" class="form-control" />
        </div>

        <div class="form-group">
          <label class="form-label fw-bold">Address</label>
          <input formControlName="address" type="text" class="form-control" />
        </div>
        <div class="form-group">
          <label class="form-label fw-bold">Postal code</label>
          <input
            formControlName="postalCode"
            type="text"
            class="form-control"
          />
        </div>
        <div class="form-check ms-1">
          <label class="form-check-label fw-bold">Vat</label>
          <input
            formControlName="inVat"
            type="checkbox"
            class="form-check-input"
            [checked]="company?.inVat"
          />
        </div>
      </div>
    </div>

    <div class="row align-items-end justify-content-between">
      <div class="col-8">
        <app-file-upload
          [company]="company"
          formControlName="certificateUrl"
        ></app-file-upload>
      </div>

      <div class="col-4">
        <button
          [disabled]="!inputChanged || !settingsForm.valid"
          class="btn btn-md text-light"
        >
          Save changes
        </button>
      </div>
    </div>
  </form>

但是没用。我该如何解决这个问题？

Answer 1

您可以使用 other 响应式表单属性

例如使用pristine

A control is pristine if the user has not yet changed the value in the UI.

<button
  [disabled]="settingsForm.pristine || settingsForm.invalid"
  class="btn btn-md text-light"
  >Save</button>

如果您需要更具体的控制值，它会变得更加棘手，因为 comparing Javascript objects 并不那么微不足道。

这 question 是一次很棒的深度学习

Answer 2

reactive form 应该有一个 valid 和 touched 属性，可以像下面这样使用。

<button
  [disabled]="!settingsForm.touched || settingsForm.invalid"
  class="btn btn-md text-light">Save</button>

Answer 3

我找到了一个使用 objectHash 的解决方案。首先使用 npm i -D @types/hash.

安装它

import * as objectHash from 'object-hash';

this.settingsForm.valueChanges.subscribe((currentValue) => {
      if (objectHash.sha1(currentValue) !== objectHash.sha1(this.company)) {
        this.inputChanged = true;
      } else {
        this.inputChanged = false;
      }
    });

////
<button
    [disabled]="!inputChanged || !settingsForm.valid"
    class="btn btn-md text-light"
    >
    Save
</button>

Disable/enable 基于值变化的按钮 Angular

Disable/enable button based on change of value Angular

forms

input

angular