如何在Angular2上使用onBlur事件？

在将事件绑定到 DOM 时使用，基本上用于事件绑定。此外，用于获取变量的双向绑定。(eventName)()ngModelmyModel

标记

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

法典

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

演示

备选案文1

<input type="text" [ngModel]="myModel" (ngModelChange)="myModel=$event">

备选案文2（不可取）

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

演示

对于要对其触发验证的模型驱动窗体，可以传递参数。blurupdateOn

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

设计文档

您还可以使用（聚焦）事件：

用于 将事件绑定到 DOM 时，基本上用于事件绑定。您也可以使用来获得您的 双向绑定。在的帮助下，您可以操作.(eventName)()ngModelmodelngModelmodelcomponent

在 HTML 文件中执行此操作

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

并在（组件）.ts 文件中

export class AppComponent { 
 model: any;
 constructor(){ }

 /*
 * This method will get called once we remove the focus from the above input box
 */
 someMethodWithFocusOutEvent() {
   console.log('Your method called');
   // Do something here
 }
}