Angular disable button if variables are empty

April 14, 2023

<button
    [disabled]="doSummary=== '' && selectedLOB === '' && adsList === ''"
    class="lmn-btn lmn-btn-primary"
    aria-label="Update"
    (click)="updateSelectedScopes()"
  >
  Update
</button>

I’ve an usecase where I need to disable the button if all 3 variables are EMPTY '' and if any of the variable is not empty, button shouldn’t be disabled. Currently I tried this way also variables are empty but its not disabling the button, not sure what’s the issue

>Solution :

This should work, assuming you initialized your variables to empty string.

So create your variables like this

doSummary: string = '';

Instead of

doSummary: string;

Or you can check for something like this

<button
    [disabled]="(!doSummary || doSummary === '') && (!selectedLOB || selectedLOB === '') && (!adsList || adsList === '')"
    class="lmn-btn lmn-btn-primary"
    aria-label="Update"
    (click)="updateSelectedScopes()"
  >
  Update
</button>