web-dev-qa-db-ja.com

Angular 2でonBlurイベントを使用する方法？

Angular 2でonBlurイベントをどのように検出しますか？一緒に使いたい

<input type="text">

誰かが私がそれを使う方法を理解するのを手伝ってくれる？

javascriptangularonblur
83
Ignat

EventをDOMにバインドしている間は(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('', {
   debounce: 1000, 
   updateOn: 'blur', //default will be change
   validators: [Validators.required]
});

デザインドキュメント

166
Pankaj Parkar

そのために（フォーカスアウト）イベントを使うこともできます。

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

そしてtsファイルに

export class AppComponent { 
 model: any;
 constructor(){ }
 yourMethod(){
   console.log('your Method is called');
 }
}
9
Aniket kale

あなたは直接inputタグで（blur）イベントを使うことができます。

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

そして "結果"に出力されます。

6
Chaudhary
/*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()); }}
1
Er Mariam Akhtar

これはGithubリポジトリで提案された答えです：

// example without validators
const c = new FormControl('', { updateOn: 'blur' });

// example with validators
const c= new FormControl('', {
   validators: Validators.required,
   updateOn: 'blur'
});

Github：feat（forms）：FormControlsにupdateOn blurオプションを追加しました

1
Ralph W

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;
}
0
Sthish Visar