How to disable the button when fields are empty using angular8

Question

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

Allabakash · Accepted Answer · 2019-12-20 05:48:33Z

2

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

edited Dec 20, 2019 at 5:48

answered Dec 20, 2019 at 5:00

Allabakash

2,0371 gold badge12 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bhrungarajni Over a year ago

Thanks for the response, sorry i forgot to add this in my demo, "pagination": this.agentParamDetails, there is one field extra here, with pagination, which is always filled with value, but that is not shown in the html, so with that it is enabled all the time, if i add your code as well

Allabakash Over a year ago

Okay, I have updated the demo for handling that, check and let me know if it helps you

Kathak Dabhi · Accepted Answer · 2019-12-20 05:11:25Z

0

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>

edited Dec 20, 2019 at 5:11

answered Dec 20, 2019 at 5:05

Kathak Dabhi

3893 silver badges17 bronze badges

Comments

Kaustubh Khare · Accepted Answer · 2019-12-20 05:22:35Z

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);
}

Collectives™ on Stack Overflow

How to disable the button when fields are empty using angular8

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related