如何在Angular2上使用onBlur事件?

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

<input type="text"> 

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

使用(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文档

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

这是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

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

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

你会得到输出在“ 结果