小编Kat*_*ate的帖子

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

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

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

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

我首先生成表单，然后从 get 请求获取响应，这样我就可以将我的公司变量设置为响应，并根据我得到的值设置表单的值。问题是我想在表单有效和更改时启用 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 …