CODEWITHSUNDEEP
javascriptangulartypescript
Bhrungarajni
Bhrungarajni

Reputation: 2535

How to disable the button when fields are empty using angular8

I have used template validation form in angular but haven't used required in any of the fields, as none of the field is mandatory. Now I need to disable the button, if all the fields are empty and enable if any one of the field is filled, and here I have email field, so if the user has entered only email field and if it is not valid then, it should throw error. If he has entered any field other than email field then the button shall be enabled.

I tried with [disabled] attribute, by assigning:

[disabled]="advanceSearch.groupAgent =="

and also tried by taking ref input and disabling with that value as well, but nothing worked for me.

Here the problem is even though I used form validation, I haven't used required to any of the field.

Can anyone help me to solve this.

Here is the demo

Upvotes: 1

Views: 2441

Answers (3)

Allabakash
Allabakash

Reputation: 2027

you can create a function to check and disable the button like below.

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>

Here is the demo - https://stackblitz.com/edit/angular-9jsrd1

Upvotes: 2

Kaustubh Khare
Kaustubh Khare

Reputation: 3510

Wrap your input fields into form. It will provide you with the ability to enable/disable your search button if your entered data is not valid.

e.g here is invalid email id.

And write the function to check all your input variables for empty.

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>

component.ts

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

Upvotes: 0

Kathak Dabhi
Kathak Dabhi

Reputation: 399

You can create a get function which will check whether the form is filled or not.

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>

Upvotes: 0

Related Questions