當字段為空時如何使用 angular8 禁用按鈕

Question

我在 angular 中使用了模板驗證表單，但沒有在任何字段中使用 required ，因為沒有一個字段是強制性的。 現在我需要禁用該按鈕，如果所有字段都為空，並在填充任何一個字段時啟用，這里我有電子郵件字段，所以如果用戶只輸入了電子郵件字段並且如果它無效，則它應該拋出錯誤。 如果他輸入了電子郵件字段以外的任何字段，則應啟用該按鈕。

我嘗試使用 [disabled] 屬性，通過分配：

[disabled]="advanceSearch.groupAgent ==" 

並且還嘗試通過獲取 ref 輸入並禁用該值，但沒有任何效果對我有用。

這里的問題是即使我使用了表單驗證，我也沒有使用任何字段。

誰能幫我解決這個問題。

這是演示

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

Answer 2

您可以創建一個 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>

Answer 3

將您的輸入字段包裝成form 。 如果您輸入的數據無效，它將為您提供啟用/禁用search按鈕的能力。

例如，這里是無效的電子郵件 ID。

並編寫函數來檢查所有輸入變量是否為空。

組件.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>

組件.ts

isFormEmpty() {
     return Object.keys(this.advanceSearch).some(key => this.advanceSearch[key] !== "" && this.advanceSearch[key] !== false);
}