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

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

pero ¿puedo hacerlo usando [ngClass]o [ngStyle]? Al igual que:

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

Gracias.

Actualizar

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

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

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

Básicamente, podrías usar ngClassaquí. Pero agregar clase no restringiría el disparo del evento. Para activar un evento con una entrada válida, debe cambiar el clickcódigo de evento a continuación. Entonces eso onConfirmse disparará solo cuando el campo sea válido.

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

Demo aquí

Recomendaría lo siguiente.

<button [disabled]="isInvalid()">Submit</button>

sí tu 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

Si tiene un formulario, 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>

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

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

[disabled] hará todo, como si el formulario es válido, se habilitará y si el formulario no es válido, se deshabilitará 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="">

Puede estar debajo del código que puede ayudar:

<button [attr.disabled]="!isValid ? true : null">Submit</button>

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 las propiedades deshabilitadas y de clic.

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>

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

Creo que esta es la forma mas facil

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>

 <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;
}