1. ホーム
  2. javascript

[解決済み] Angular2でonBlurイベントを使用するには?

2022-06-18 06:52:58

質問

Angular2でonBlurイベントを検出する方法を教えてください。 私はそれを使用したい

<input type="text">

どなたか使い方を教えてください。

どのように解決するのですか?

使用方法 (eventName) を使うことで、基本的に () はイベントバインディングのために使用されます。また ngModel の双方向のバインディングを得るには myModel 変数への双方向のバインディングを得ることができます。

マークアップ

<input type="text" [(ngModel)]="myModel" (blur)="onBlurMethod()">

コード

export class AppComponent { 
  myModel: any;
  constructor(){
    this.myModel = '123';
  }
  onBlurMethod(){
   alert(this.myModel) 
  }
}

デモ

代替案(好ましくない)

<input type="text" #input (blur)="onBlurMethod($event.target.value)">

デモ


モデル駆動型フォームでバリデーションを行うには blur に対してバリデーションを行うには updateOn パラメータを渡すことができます。

ctrl = new FormControl('', {
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
}); 

デザイン資料