Angular2'de[disable] özniteliğe sahip bir düğmeyi devre dışı bırakabileceğimi biliyorum, örneğin:

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

ama kullanarak bunu yapabilirsiniz [ngClass]veya [ngStyle]? Şöyle:

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

Teşekkürler.

Güncelleme

Merak ediyorum. [disabled]Angular 2 tarafından sağlanan öznitelik bağlamayı neden kullanmak istemiyorsunuz ? Bu durumla başa çıkmanın doğru yolu budur. isValidÇekinizi bileşen yöntemi ile taşımanızı öneririm .

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

Denediklerinizle ilgili sorun aşağıda açıklanmıştır

Temelde ngClassburada kullanabilirsiniz . Ancak sınıf eklemek, olayın ateşlenmesini kısıtlamaz. Geçerli girişte olayı başlatmak için, clickolay kodunu aşağıdaki şekilde değiştirmelisiniz . Yani bu onConfirmsadece alan geçerli olduğunda ateşlenecek.

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

Demo Burada

Aşağıdakileri tavsiye ederim.

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

Evet yapabilirsin

<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

Bir formunuz varsa, aşağıdakiler de mümkündür:

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

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

kullanma ngClass engelliler için geçersiz form için düğmeye onun sağlayan dahili etkinleştirmek ve form herhangi bir ekstra çaba / mantığı yapmadan sırasıyla geçerli ve geçersiz ise düğmesini devre dışı özelliklerinizi Angular2 iyi uygulama değildir.

[disabled] form geçerliyse etkinleştirilecek ve form geçersizse otomatik olarak devre dışı bırakılacak gibi her şeyi yapacaktır.

Örneğe bakın:

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

Aşağıdaki kod yardımcı olabilir:

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

Tıklama olayı ile birlikte devre dışı bırakmayı denedim. Aşağıda pasaj var, kabul edilen cevap da mükemmel bir şekilde çalıştı, bu cevabı devre dışı bırakma ve tıklama özellikleriyle nasıl kullanılabileceğine bir örnek vermek için ekliyorum.

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

Reaktif formlar kullanıyorsanız ve bir form kontrolüyle ilişkili bazı girişleri devre dışı bırakmak istiyorsanız, bu disabledmantığı kodunuza yerleştirmelisiniz ve arama yourFormControl.disable()veyayourFormControl.enable()

Bence bu en kolay yol

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

.ts kodu

setStyles() 
{
    let styles = {

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