javascript - 如何使用 angular 8 在字段为空时禁用按钮

Question

我在 Angular 中使用了模板验证表单，但没有在任何字段中使用 required ，因为没有一个字段是强制性的。现在我需要禁用按钮，如果所有字段都为空，如果有任何一个字段被填充，则启用按钮，这里我有电子邮件字段，所以如果用户只输入了电子邮件字段并且如果它无效，那么它应该抛出错误。如果他输入了电子邮件字段以外的任何字段，则应启用该按钮。

我尝试使用 [disabled] 属性，通过分配:

[disabled]="advanceSearch.groupAgent ==" 

也尝试过采用 ref 输入并禁用该值，但对我来说没有任何效果。

这里的问题是即使我使用了表单验证，我也没有对任何字段使用 required。

谁能帮我解决这个问题。

这是 demo

Answer 1

您可以创建一个函数来检查和禁用按钮，如下所示。

this.exludeFields = ["pagination"];
disableSubmit() {
    let disabled = true;
    const keys = Object.keys(this.advanceSearch);
    keys.forEach(key => {

      if (this.advanceSearch[key] && !this.exludeFields.includes(key)) {

        disabled = false;
        return;
      }
    });
    return disabled;
  }

<button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getAdvanceSearchList()" [disabled]="disableSubmit()">
                    <i class="fas fa-search"></i> Search</button>

这是演示 - https://stackblitz.com/edit/angular-9jsrd1