Tôi biết rằng trong angle2, tôi có thể tắt một nút có [disable]thuộc tính, ví dụ:

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

nhưng tôi có thể làm điều đó bằng cách sử dụng [ngClass]hoặc [ngStyle]? Như vậy:

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

Cảm ơn.

Cập nhật

Tôi tự hỏi. Tại sao bạn không muốn sử dụng [disabled]ràng buộc thuộc tính do Angular 2 cung cấp? Đó là cách chính xác để giải quyết tình huống này. Tôi đề nghị bạn chuyển isValidséc của mình qua phương pháp thành phần.

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

Sự cố với những gì bạn đã thử được giải thích bên dưới

Về cơ bản bạn có thể sử dụng ngClassở đây. Nhưng việc thêm lớp sẽ không hạn chế sự kiện kích hoạt. Để kích hoạt sự kiện trên đầu vào hợp lệ, bạn nên thay đổi clickmã sự kiện thành bên dưới. Vì vậy, điều đó onConfirmsẽ chỉ được kích hoạt khi trường hợp lệ.

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

Demo tại đây

Tôi muốn giới thiệu những điều sau đây.

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

Có bạn có thể

<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

Nếu bạn có một biểu mẫu thì bạn cũng có thể làm như sau:

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

Demo tại đây: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

Sử dụng ngClassđể tắt nút đối với biểu mẫu không hợp lệ không phải là thực tiễn tốt trong Angular2 khi nó cung cấp các tính năng có sẵn để bật và tắt nút nếu biểu mẫu hợp lệ và không hợp lệ tương ứng mà không cần thực hiện thêm bất kỳ nỗ lực / logic nào.

[disabled] sẽ làm tất cả những điều như nếu biểu mẫu hợp lệ thì nó sẽ được kích hoạt và nếu biểu mẫu không hợp lệ thì nó sẽ tự động bị vô hiệu hóa.

Xem Ví dụ:

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

Có thể mã dưới đây có thể giúp:

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

Tôi đã thử sử dụng vô hiệu hóa cùng với sự kiện nhấp chuột. Dưới đây là đoạn mã, câu trả lời được chấp nhận cũng hoạt động hoàn toàn tốt, tôi đang thêm câu trả lời này để đưa ra ví dụ về cách nó có thể được sử dụng với thuộc tính vô hiệu hóa và nhấp chuột.

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

Nếu bạn đang sử dụng biểu mẫu phản ứng và muốn tắt một số đầu vào được liên kết với điều khiển biểu mẫu, bạn nên đặt disabledlogic này vào mã của bạn và gọi yourFormControl.disable()hoặcyourFormControl.enable()

Tôi nghĩ đây là cách dễ nhất

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

mã .ts

setStyles() 
{
    let styles = {

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