Saya tahu bahwa di angular2 saya dapat menonaktifkan tombol dengan [disable]atribut, misalnya:

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

tetapi dapatkah saya melakukannya dengan menggunakan [ngClass]atau [ngStyle]? Seperti:

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

Terima kasih.

Memperbarui

Aku bertanya-tanya. Mengapa Anda tidak ingin menggunakan [disabled]pengikatan atribut yang disediakan oleh Angular 2? Ini cara yang benar untuk menghadapi situasi ini. Saya usulkan Anda memindahkan isValidcek melalui metode komponen.

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

Masalah dengan apa yang Anda coba dijelaskan di bawah ini

Pada dasarnya Anda bisa menggunakan di ngClasssini. Tetapi menambahkan kelas tidak akan membatasi pengaktifan acara. Untuk mengaktifkan acara pada input yang valid, Anda harus mengubah clickkode acara di bawah ini. Sehingga onConfirmakan dipecat hanya jika field valid.

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

Demo Disini

Saya akan merekomendasikan yang berikut ini.

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

ya kamu bisa

<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

Jika Anda memiliki formulir maka hal berikut juga dimungkinkan:

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

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

Menggunakan ngClassuntuk menonaktifkan tombol untuk formulir tidak valid bukanlah praktik yang baik di Angular2 ketika menyediakan fitur bawaan untuk mengaktifkan dan menonaktifkan tombol jika formulir masing-masing valid dan tidak valid tanpa melakukan upaya ekstra / logika.

[disabled] akan melakukan semua hal seperti jika formulir valid maka itu akan diaktifkan dan jika formulir tidak valid maka itu akan dinonaktifkan secara otomatis.

Lihat Contoh:

<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="">

Mungkin kode di bawah ini dapat membantu:

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

Saya mencoba menggunakan dinonaktifkan bersama dengan acara klik. Di bawah ini adalah cuplikannya, jawaban yang diterima juga berfungsi dengan baik, saya menambahkan jawaban ini untuk memberikan contoh bagaimana ia dapat digunakan dengan properti yang dinonaktifkan dan klik.

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

Jika Anda menggunakan formulir reaktif dan ingin menonaktifkan beberapa masukan yang terkait dengan kontrol formulir, Anda harus menempatkan disabledlogika ini ke dalam kode dan panggilan Anda yourFormControl.disable()atauyourFormControl.enable()

Saya pikir ini adalah cara termudah

<!-- 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>

kode .ts

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}