CODEWITHSUNDEEP
angular
Nils
Nils

Reputation: 469

Disable a button with multiple layers of conditions in html-file

Im sorry, i didnt really know how to call this, thats why i couldn't find anything on google too. Basically i want to try the following which doesn't seem to work

<button [disabled]="condition1 || condition2 || (condition3 && condition4)">Save</button>

Condition1 and condition2 are working fine but if condition3 and 4 are met, the button still is active

Thanks for your help ^^

Upvotes: 0

Views: 111

Answers (2)

Chathuran D
Chathuran D

Reputation: 2430

You can use function to achieve this

Working Demo

in .ts

   getCondition():boolean{
      return this.condition1 || this.condition2 || (this.condition3 && this.condition4);
    }

.html

<button [disabled]="getCondition()">Save</button>

Upvotes: 1

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Here are the four condition written in .ts file 

    cond3 = true;
    cond2 = false;
    cond1 = false;
    cond4 = true;

Here is code in .html file

<button [disabled]="(cond1 || cond2) || ((cond3 && cond4))">

Case : 1 If cond3 and cond4 both are true then it will satisfy the condition and put the button false .
If any one in cond3 and cond4 are false then it will not statisfy the condition and make button clickable


Hope you get the answer .

Upvotes: 1

Related Questions