Javascript 如何使用angular8在字段为空时禁用按钮

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

我尝试使用[disabled]属性，方法是分配：

[disabled]="advanceSearch.groupAgent ==" 

还尝试了使用ref输入并禁用该值，但没有任何效果

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

谁能帮我解决这个问题

---

这是一个

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

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>

this.exludeFields=[“分页”]；
disableSubmit（）{
设残疾人=真；
const keys=Object.keys（this.advanceSearch）；
keys.forEach（key=>{
if（this.advanceSearch[key]&&！this.exludeFields.includes（key））{
禁用=错误；
返回；
}
});
返回残疾人；
}
搜寻

---

这是演示-

您可以创建一个get函数，该函数将检查表单是否已填写

get searchFilled(): boolean {
    for (var key in this.advanceSearch) {
        //Apply your email validation here and return value accordingly
        if (this.advanceSearch[key] !== null && this.advanceSearch[key] != "")
            return true;
    }
    return false;
  }

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

get searchFilled（）：布尔值{
for（此.advanceSearch中的var键）{
//在此处应用电子邮件验证并相应返回值
if（this.advanceSearch[key]！==null&&this.advanceSearch[key]！=“”）
返回true；
}
返回false；
}
搜寻

将输入字段包装到

表单中

。如果输入的数据无效，它将使您能够启用/禁用

搜索
按钮

e、 这里是无效的电子邮件id

并编写函数检查所有输入变量是否为空

component.html

<!-- into modal-content div -->
    <form #myform="ngForm">
      <!-- input fields -->
     <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="resetAdvanceSearch()">
           <i class="fas fa-undo-alt"></i> Reset</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="getAdvanceSearchList()" [disabled]="myform.invalid && isFormEmpty()">
       <i class="fas fa-search"></i> Search</button>
     </div> 
</form>

感谢您的回复，很抱歉我忘了在我的演示中添加这个“pagination”：this.agentParamDetails，这里有一个额外的字段，带有pagination，它总是用值填充，但在html中没有显示，因此它一直处于启用状态，如果我也添加了您的代码好的，我已经更新了演示来处理这个问题，检查并让我知道它是否对您有帮助
isFormEmpty() {
     return Object.keys(this.advanceSearch).some(key => this.advanceSearch[key] !== "" && this.advanceSearch[key] !== false);
}