如何在Angular2上使用onBlur事件？

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

<input type="text"> 

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

Answer 1

使用(eventName)绑定事件到DOM，基本上()用于事件绑定。 同样使用ngModel来获取myModelvariables的双向绑定。

标记

 <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火灾validation，你可以传递updateOn参数。

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

devise文档

Answer 2

 /*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()); }} 

Answer 3

这是Github回购的build议答案：

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

Github：壮举（forms）：添加updateOn模糊选项FormControls

Answer 4

您可以直接在input标签中使用（模糊）事件。

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

你会得到输出在“ 结果 ”