如何在Angular2上使用onBlur事件？

Question

你如何在Angular2中检测到onBlur事件？我想用它

<input type="text">

任何人都可以帮我理解如何使用它吗？

Answer 1

使用(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]
}); 

设计文档

Answer 2

你也可以使用(focusout)事件.

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

并在ts文件中

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

Answer 3

您可以在输入标签中直接使用(模糊)事件.

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

你会得到" 结果 "的输出