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 좋은 방법이 아닙니다.

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

클릭 이벤트와 함께 disabled를 사용해 보았습니다. 아래는 스 니펫이며 허용되는 답변도 완벽하게 작동했습니다.이 답변을 추가하여 비활성화 및 클릭 속성과 함께 사용할 수있는 방법의 예를 제공합니다.

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