Angular2 Disable Button

Angular2 disable button

Update

I'm wondering. Why don't you want to use the [disabled] attribute binding provided by Angular 2? It's the correct way to dealt with this situation. I propose you move your isValid check via component method.

<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>

The Problem with what you tried explained below

Basically you could use ngClass here. But adding class wouldn't restrict event from firing. For firing up event on valid input, you should change click event code to below. So that onConfirm will get fired only when field is valid.

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

Demo Here

Angular 8 make button disable based on parent class

You could access the DOM element, example:

<div #div1 class="foobar hero">
  I am a div with any class
  <button class="btn" [disabled]="div1.classList.contains('done') || div1.classList.contains('active')">Button</button>
</div>
<hr>
<div #div2>
  I am a div with no class
  <button class="btn" [disabled]="div2.classList.contains('done') || div2.classList.contains('active')">Button</button>
</div>
<hr>
<div #div3 class="done">
  I am a div with done class
  <button class="btn" [disabled]="div3.classList.contains('done') || div3.classList.contains('active')">Button</button>
</div>
<hr>
<div #div4 class="active">
  I am a div with active class
  <button class="btn" [disabled]="div4.classList.contains('done') || div4.classList.contains('active')">Button</button>
</div>
<hr>

Stackblitz:
https://stackblitz.com/edit/angular-ivy-qjsvfi?file=src/app/app.component.html

Edit:
It seems like you are using bootstrap, you might want to think about setting the disabled class instead of the property.

<button class="btn" [ngClass]="{ disabled: div4.classList.contains('done') || div4.classList.contains('active') }">Button</button>

Disable button in angular with two conditions?

It sounds like you need an OR instead:

<button type="submit" [disabled]="!validate || !SAForm.valid">Add</button>

This will disable the button if not validate or if not SAForm.valid.

Angular 2+ disabling button of a particular row

If you have a the "ownership" for records array, you can add an other key-value pair, say 'disabled', otherwise you can create a parallel array disablebutton of the same length as records:

  disablebutton = [false,false,...] // better be done in a for loop or with array methods in your code

In the template, you should pass the id of the row which needs the button to be disabled. You get the row index in ngFor:

<div *ngFor="let n of records; let i = index">
   <span>{{n.name}}</span>
   <span>{{n.location}}</span>
   <button (click)="addtomainrecord(i)" [disabled]="disablebutton[i]">add</button>
</div>

And the the method will catch that index to set the button state:

  addtomainrecord(index) {
    this.disablebutton[index] = true;
  }

Demo

Enable/disable buttons with Angular

Set a property for the current lesson: currentLesson. It will hold, obviously, the 'number' of the choosen lesson. On each button click, set the currentLesson value to 'number'/ order of the button, i.e. for the first button, it will be '1', for the second '2' and so on.
Each button now can be disabled with [disabled] attribute, if it the currentLesson is not the same as it's order.

HTML

  <button  (click)="currentLesson = '1'"
         [disabled]="currentLesson !== '1'" class="primair">
           Start lesson</button>
  <button (click)="currentLesson = '2'"
         [disabled]="currentLesson !== '2'" class="primair">
           Start lesson</button>
 .....//so on

Typescript

currentLesson:string;

  classes = [
{
  name: 'string',
  level: 'string',
  code: 'number',
  currentLesson: '1'
}]

constructor(){
  this.currentLesson=this.classes[0].currentLesson
}

DEMO

Putting everything in a loop:

HTML

<div *ngFor="let class of classes; let i = index">
   <button [disabled]="currentLesson !== i + 1" class="primair">
           Start lesson {{i +  1}}</button>
</div>

Typescript

currentLesson:string;

classes = [
{
  name: 'Lesson1',
  level: 1,
  code: 1,
},{
  name: 'Lesson2',
  level: 1,
  code: 2,
},
{
  name: 'Lesson3',
  level: 2,
  code: 3,
}]

DEMO

How to disable button in angular securely?

You cannot "safely" disable stuff on the client side. User can modify not only HTML, but the javascript as well, so even if there would be "secure" ways to disable buttons, users could still check what javascript will run and run it.

Angular: Trying to disable button after amount of clicks

I created a code demo for you that disables the button after 5 click: link to the demo

Please feel free to adapt the code according to your needs.

---

Related Topics