CODEWITHSUNDEEP
angulartypescript
coder_7
coder_7

Reputation: 57

How to use disabled property ?Angular 10 disabled property not working

---Update---

i posted this question earlier but did not get the solution. in one github blog i found out "isButtonDisabled" alone will not work and need to call a function.In my code i can only bring a boolean value after validating some conditions in ts. whats going wrong?

github link

I have tried both [disabled] or disabled. It is not working as per my condition in typescript. I have 4 buttons where i need to implement this based on my typescript condition. I have 7 conditions with which i need to evaluate. As of now the button gets disabled irrespective of the condition. Please suggest any other ways to achieve it

HTML

<button type="button" [disabled]="isButtonDisabled"
              style="background: #79CEA4 !important;color: #FFFFFF !important;font-size: 13px;font-weight: 600;margin-right: 20px"
              class="btn  btn-lg" (click)="finish()">FINISH</button>

TS

isButtonDisabled:boolean;
for (var EmployeeList of Employee){
        if ((EmployeeList.EmployeeStatus== 'Active')  {
          this.isButtonDisabled= false;
          return 'circle3';  
        }
        else if((EmployeeList.EmployeeStatus== 'Inactive') {
           this.isButtonDisabled= true;
           return 'circle1';

}

Upvotes: 0

Views: 4405

Answers (1)

Terrance00
Terrance00

Reputation: 1678

The problem there is that the normal html <button> interprets disabled="anything" as disabled.

So in Angular you can achieve having the attribute vs. not having the attribute using the below:

<button [attr.disabled]="isButtonDisabled ? true: null"...

Upvotes: 2

Related Questions