如何在 Angular2上使用 onBlur 事件？

小开

最佳答案

在将事件绑定到 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]
});

设计文档

小开

/*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 回购协议的建议答案:

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


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

专长(表单) : 将 updateOn 模糊选项添加到 FormControls

小开

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

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

你会得到“ 结果”的输出

小开

你也可以使用 (聚焦)事件:

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

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

小开

超文本标示语言

<input name="email" placeholder="Email"  (blur)="$event.target.value=removeSpaces($event.target.value)" value="">

TS

removeSpaces(string) {
let splitStr = string.split(' ').join('');
return splitStr;
}

小开

尝试使用(聚焦)代替(模糊)

小开

另一个可能的选择

HTML 组件文件:

<input formControlName="myInputFieldName" (blur)="onBlurEvent($event)">

TypeScript 组件文件:

import { OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';


export class MyEditComponent implements OnInit {


public myForm: FormGroup;
    

constructor(private readonly formBuilder: FormBuilder) { }
    

ngOnInit() {


this.myForm = this.formBuilder.group({
            

myInputFieldName: ['initial value', { validators: [Validators.required, Validators.maxLength(100), anotherValidator], updateOn: 'blur' }],


});
}


onBlurEvent(event) {
        

// implement here what you want


if (event.currentTarget && event.currentTarget.value && event.currentTarget.value !== '') { }


}
}

小开

我最后在角度14做了类似的事情

<form name="someForm" #f="ngForm" (ngSubmit)="onSubmit(f)"> ...
<input
matInput
type="email"
name="email"
autocomplete="email"
placeholder="EMAIL"
[ngModel]="payload.email"
#email="ngModel"
(blur)="checkEmailBlur(f)"
required
email
tabindex="1"
autofocus
/>

然后... 进去

 checkEmailBlur(f: NgForm) {
const email = f.value.email;