web-dev-qa-db-ja.com

Angular 2無効ボタン

angular2 で[disable]属性でボタンを無効にできることを私は知っています、例えば：

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

しかし、[ngClass]または[ngStyle]を使用して実行できますか？そのようです：

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

ありがとう。

htmlangularangular2-templateangular2-forms
96
Nir Schwartz

更新

不思議なんだけど。 Angular 2で提供されている[disabled]属性バインディングを使いたくないのでしょうか。これはこの状況に対処するための正しい方法です。 isValidチェックをコンポーネントメソッドで移動することをお勧めします。

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

あなたが試したことの問題は以下に説明します

基本的にここではngClassを使うことができます。しかし、クラスを追加してもイベントの発生を制限することはありません。有効な入力でイベントを起動するには、clickイベントコードを下記に変更する必要があります。そのためonConfirmはfieldが有効なときにのみ起動されます。

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

デモはこちら

146
Pankaj Parkar

私は以下をお勧めします。

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

はい、できます

<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

7
Sasikumar D.R.

あなたがフォームを持っているならば、以下も可能です：

<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

6
Raptor

ngClassを使用して無効なフォームのボタンを無効にすることは、余分な労力やロジックを行わずにフォームが有効な場合と無効な場合にボタンを有効または無効にする組み込み機能を提供する場合には好ましくありません。

[disabled]は、formが有効ならば有効になり、formが無効ならば自動的に無効になるようなことをすべて行います。

例を参照してください。

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

以下のコードが役に立つことがあります：

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

クリックイベントと一緒にdisabledを使ってみました。下のスニペットです、受け入れられた答えはまた完全にうまくいきました、私はそれが無効にされてクリックされたプロパティでどのように使われることができるか例を与えるためにこの答えを加えています。

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

私はこれが最も簡単な方法だと思います

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>
2
Gouk

リアクティブフォームを使用していて、フォームコントロールに関連付けられている入力を無効にしたい場合は、このdisabledロジックをコードに配置してyourFormControl.disable()またはyourFormControl.enable()を呼び出す必要があります。

2
Sergey P. aka azure
 <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;
}
1
Amir Twito