CODEWITHSUNDEEP
htmlangulartypescript
CodeVenture
CodeVenture

Reputation: 187

Disabled button still fires save method angular HTML

When clicking on disabled button, it is still firing the SaveComments() method. I have below code which seems to be fine.

<div class="btn btn-success disabled" [class.disabled]="isDisabled==true" id="btn-post-comments" (click)="saveComments()" ><span class="glyphicon glyphicon-ok"></span>POST</div>

If there is anyway, I can prevent to stop triggering the SaveComments method when the button is disabled.

Thank you!

Upvotes: 1

Views: 2101

Answers (3)

vsnikhilvs
vsnikhilvs

Reputation: 576

The easiest and best way would be conditionally handling the click event, like you handle disabled attribute.

(click)="someCondition == true ? fnForTrue() : fnForFalse()"

Upvotes: 2

Martin Godzina
Martin Godzina

Reputation: 1575

You can prevent click events by disabling the element with a disabled attribute. But the disabled attribute only work for following elements:

<button>, <fieldset>, <input>, <optgroup>, <option>, <select> and <textarea>

Your code has two issues:

  1. The <div> element you´r using does not support the disabled attribute
  2. There is none disabled attribute set. You can set it conditional with [attr.disabled]="condition"

This is how you could solve your issue:

<button class="btn btn-success disabled" [attr.disabled]="isDisabled" id="btn-post-comments" (click)="saveComments()" ><span class="glyphicon glyphicon-ok"></span>POST</button>

As you can see there is also no need to write the condition for the disabled attribute like this: "isDisabled == true" which is the same as "isDisabled".

Upvotes: 1

Bulle-dog
Bulle-dog

Reputation: 34

in "saveComments" you can add a test on the "isDisabled" to know if you launch the treatment inside.

saveComments():void{
    if(this.disable == false){
       //Your treatment here...
    }
}

But it's better with a button.

Upvotes: -1

Related Questions