Angular2 비활성화 버튼

Angular2 비활성화 버튼

angular2에서는 다음과 같은 속성을 가진 버튼을 비활성화할 수 있습니다.

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

또는?를 사용하여 할 수 있습니까?

<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

사용.ngClassAngular2에서는 폼이 유효하거나 무효인 경우 별도의 노력/논리를 수행하지 않고 버튼을 활성화/비활성화하는 기능을 내장하고 있는 경우 비활성화된 폼에 대해 버튼을 비활성화하는 것은 좋은 방법이 아닙니다.

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

언급URL : https://stackoverflow.com/questions/35535350/angular2-disable-button