如何在 Angular2 上使用 onBlur 事件？

Question

如何在 Angular2 中检测到 onBlur 事件？

我想用它

<input type="text">

谁能帮我理解如何使用它？

原文由 Ignat 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

标记

<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)">

演示

---

对于要在 blur 上触发验证的模型驱动表单，您可以传递 updateOn 参数。

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

设计文档

原文由 Pankaj Parkar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您还可以使用 (focusout) 事件：

使用 (eventName) 将事件绑定到 DOM，基本上 () 用于事件绑定。您也可以使用 ngModel 为您的 model 获取双向绑定。在 ngModel 的帮助下，您可以操作 model 您的 component 中的变量值。

在 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
 }
}

原文由 Aniket kale 发布，翻译遵循 CC BY-SA 4.0 许可协议