Angular2でonBlurイベントを使用するにはどうすればよいですか?


112

Angular2でonBlurイベントをどのように検出しますか?で使いたい

<input type="text">

誰かがそれを使用する方法を理解するのを手伝ってくれる?

回答:


211

(eventName)イベントをDOMにバインドするときに使用します。基本的に()は、イベントバインドに使用されます。変数の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]
}); 

設計ドキュメント


2
なぜ代替案が望ましくないのですか?
スラッシュ2017

Angularは、HTML内で$ eventを使用してJSに送り返すことを望んでいません。すべてのDOM操作は、バインディング、ngModel、whatnotなどを介して実行する必要があります。
Barton Durbin 2017

14

(focusout)イベントを使用することもできます。

(eventName)イベントをDOMにバインドするときに使用します。基本的に()は、イベントバインドに使用されます。また、を使用ngModelして双方向のバインディングを取得することもできますmodelngModelあなたの助けを借りて、あなたのmodel中で変数値を操作することができますcomponent

これをHTMLファイルで行う

<input type="text" [(ngModel)]="model" (focusout)="someMethodWithFocusOutEvent($event)">

(コンポーネント).tsファイル

export class AppComponent { 
 model: any;
 constructor(){ }
 someMethodWithFocusOutEvent(){
   console.log('Your method called');
   // Do something here
 }
}

@Aniketkale someMethodWithFocusOutEventアラートがフィールドのフォーカスを失うと、プログラムにループが入るメソッドにアラートを配置した場合、これを修正する方法はありますか?
ps0604

6

入力タグで直接(ぼかし)イベントを使用できます。

<div>
   <input [value] = "" (blur) = "result = $event.target.value" placeholder="Type Something">
   {{result}}
</div>

そして、あなたは「結果」で出力を取得します


3

HTML

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

TS

removeSpaces(string) {
 let splitStr = string.split(' ').join('');
  return splitStr;
}

1
/*for reich text editor */
  public options: Object = {
    charCounterCount: true,
    height: 300,
    inlineMode: false,
    toolbarFixed: false,
    fontFamilySelection: true,
    fontSizeSelection: true,
    paragraphFormatSelection: true,

    events: {
      'froalaEditor.blur': (e, editor) => { this.handleContentChange(editor.html.get()); }}


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.