ฉันรู้ว่าในangular2ฉันสามารถปิดการใช้งานปุ่มที่มี [disable]แอตทริบิวต์ตัวอย่างเช่น:

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

แต่ฉันสามารถทำได้โดยใช้[ngClass]หรือ[ngStyle]? ชอบมาก:

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

ขอบคุณ.

อัปเดต

ฉันสงสัย. ทำไมคุณไม่ต้องการใช้การ[disabled]ผูกแอตทริบิวต์ที่ Angular 2 ให้มา? เป็นวิธีที่ถูกต้องในการรับมือกับสถานการณ์นี้ ฉันขอเสนอให้คุณย้ายisValidเช็คของคุณด้วยวิธีส่วนประกอบ

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

ปัญหาเกี่ยวกับสิ่งที่คุณพยายามอธิบายไว้ด้านล่าง

โดยทั่วไปคุณสามารถใช้ngClassที่นี่ได้ แต่การเพิ่มคลาสจะไม่ จำกัด เหตุการณ์ไม่ให้เริ่มทำงาน สำหรับการเริ่มต้นเหตุการณ์ด้วยอินพุตที่ถูกต้องคุณควรเปลี่ยนclickรหัสเหตุการณ์เป็นด้านล่าง ดังนั้นonConfirmจะถูกยิงเมื่อฟิลด์ถูกต้องเท่านั้น

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

สาธิตที่นี่

ฉันจะแนะนำสิ่งต่อไปนี้

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

ใช่คุณสามารถ

<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

หากคุณมีแบบฟอร์มคุณสามารถทำสิ่งต่อไปนี้ได้:

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

สาธิตที่นี่: http://plnkr.co/edit/Xm2dCwqB9p6WygrquUGh?p=preview&open=app%2Fapp.component.ts

การใช้ngClassเพื่อปิดใช้งานปุ่มสำหรับรูปแบบที่ไม่ถูกต้องไม่ใช่แนวทางปฏิบัติที่ดีใน Angular2 เมื่อมีการให้คุณสมบัติ inbuilt เพื่อเปิดใช้งานและปิดใช้งานปุ่มหากแบบฟอร์มถูกต้องและไม่ถูกต้องตามลำดับโดยไม่ต้องใช้ความพยายาม / ตรรกะเพิ่มเติม

[disabled] จะทำทุกอย่างเช่นถ้าแบบฟอร์มถูกต้องก็จะเปิดใช้งานและหากแบบฟอร์มไม่ถูกต้องระบบจะปิดใช้งานโดยอัตโนมัติ

ดูตัวอย่าง:

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

อาจอยู่ด้านล่างรหัสสามารถช่วยได้:

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

ฉันลองใช้ปิดใช้งานร่วมกับเหตุการณ์คลิก ด้านล่างนี้คือตัวอย่างข้อมูลคำตอบที่ยอมรับก็ใช้ได้ดีเช่นกันฉันกำลังเพิ่มคำตอบนี้เพื่อให้ตัวอย่างว่าสามารถใช้กับคุณสมบัติปิดใช้งานและคลิกได้อย่างไร

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

หากคุณกำลังใช้รูปแบบปฏิกิริยาและต้องการปิดใช้งานอินพุตบางอย่างที่เกี่ยวข้องกับตัวควบคุมฟอร์มคุณควรวางdisabledตรรกะนี้ลงในโค้ดของคุณและเรียกyourFormControl.disable()หรือyourFormControl.enable()

ฉันคิดว่านี่เป็นวิธีที่ง่ายที่สุด

<!-- 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 รหัส

setStyles() 
{
    let styles = {

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