入力が空の場合にボタンを無効にします。

Question

入力が空であるかどうかを確認します。

• 空でない場合は、[送信]ボタンを有効にします。
• 空の場合は、サブミット ボタンを無効にします。

(oninput)と(onchange)を試しましたが、実行されませんでした。

<input type="password" [(ngModel)]="myPassword" (oninput)="checkPasswordEmpty()"/> 

checkPasswordEmpty() { 
    console.log("checkPasswordEmpty runs"); 
    if (this.myPassword) { 
     // enable the button 
    } 
} 

Answer 1

この場合、フォーム検証ツールを活用します。入力に「必須」検証を追加し、フォームのグローバル状態を使用してボタンを無効/有効にします。テンプレート駆動型のアプローチで

は、あなたのコンポーネントにそのテンプレートで唯一のものを追加するコードはありません...ここで

は、以下のサンプルです： `アプリ/のための

<form #formCtrl="ngForm"> 
    <input ngControl="passwordCtrl" required> 
    <button [disabled]="!formCtrl.form.valid">Some button</button> 
</form> 

Answer 2

イベントを関数にバインドするには、接頭辞としてonを付ける必要はありません。ちょうどイベントを配置します。例えば

、あなたが​​（plunker demo）を処理する場合：あなたがオフに優れているあなたはすでにngModelを使用しているので、

---

しかし、あなたの特定のケースで

<input type="password" [(ngModel)]="myPassword" (keydown)="checkPasswordEmpty($event)"/> 

、 (ngModelChange)を使用して：

<input type="password" [(ngModel)]="myPassword" (ngModelChange)="checkPasswordEmpty()"/> 

ユーザーがペーストしたときに変更が反映されるため（CTRL + Vまたはマウス右クリックメニュー - >ペースト）を入力する代わりに、パスワードを入力します。

plunker demo for using (ngModelChange) hereを参照してください。