你如何检测 Angular2 中的 onBlur 事件？我想用它
<input type="text">
谁能帮助我了解如何使用它？
如何在 Angular2 上使用 onBlur 事件？
IT技术
javascript
angular
onblur
2021-02-20 23:48:29
6个回答
使用(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]
});
您还可以使用(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
}
}
您可以在输入标签中直接使用(blur)事件。
<div>
<input [value]="" (blur)="result = $event.target.value" placeholder="Type Something">
{{result}}
</div>
你会在“结果”中得到输出
HTML
<input name="email" placeholder="Email" (blur)="$event.target.value=removeSpaces($event.target.value)" value="">
TS
removeSpaces(string) {
let splitStr = string.split(' ').join('');
return splitStr;
}
/*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()); }}