Botón de desactivación Angular2

Sé que en angular2 puedo desactivar un botón con el [disable] atributo, por ejemplo: 

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

Pero puedo hacerlo usando [ngClass] o [ngStyle] ? Así:

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

Gracias.

Author: Nir Schwartz, 2016-02-21
Source

10 answers

Update

Me pregunto. ¿Por qué no desea utilizar el enlace de atributos [disabled] proporcionado por Angular 2? Es la manera correcta de lidiar con esta situación. Propongo que mueva su verificación isValid a través del método component.

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

El problema con lo que intentaste se explica a continuación

Básicamente podrías usar ngClass aquí. Pero agregar clase no restringiría el disparo de evento. Para activar el evento en una entrada válida, debe cambiar el código de evento click a continuación. Así que onConfirm se disparará solo cuando el campo sea válido.

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

Demo Aquí

 122
Author: Pankaj Parkar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-08 05:36:23

Recomendaría lo siguiente.

<button [disabled]="isInvalid()">Submit</button>
 35
Author: Proximo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-08 15:24:29

Sí puedes 

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
         (click)="toggle(!isOn)">
         Click me!
 </div>

Https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

 5
Author: Sasikumar D.R.,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-21 11:16:34

Si usted tiene un formulario entonces lo siguiente también es posible: 

<form #f="ngForm">
    <input name="myfield" type="text" minlenght="3" required ngModel>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

Demo aquí: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

 5
Author: Raptor,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-09 09:39:33

Usar ngClass para deshabilitar el botón para formulario no válido no es una buena práctica en Angular2 cuando proporciona características incorporadas para habilitar y deshabilitar el botón si el formulario es válido e inválido respectivamente sin hacer ningún esfuerzo adicional/lógica.

[disabled] hará todas las cosas como si el formulario es válido, entonces se habilitará y si el formulario no es válido, entonces se desactivará automáticamente.

Ver Ejemplo: 

<form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
<input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">

 4
Author: Slack,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-06 11:28:37

Puede estar por debajo del código puede ayudar: 

<button [attr.disabled]="!isValid ? true : null">Submit</button>
 3
Author: Shivang Gupta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-31 10:31:30

Intenté usar deshabilitado junto con el evento de clic. A continuación se muestra el fragmento , la respuesta aceptada también funcionó perfectamente bien , estoy agregando esta respuesta para dar un ejemplo de cómo se puede usar con propiedades deshabilitadas y de clic.

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>
 2
Author: pritesh agrawal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-12 01:26:56

Si está utilizando formularios reactivos y desea deshabilitar alguna entrada asociada con un control de formulario, debe colocar esta lógica disabled en su código y llamar a yourFormControl.disable() o yourFormControl.enable()

 2
Author: Sergey P. aka azure,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-01 09:29:28 
 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.código ts 

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}
 1
Author: Amir Twito,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-16 09:10:52

Creo que esta es la forma más fácil 

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
 1
Author: Gouk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-10 15:39:16