如何在 Angular2 上使用 onBlur 事件

How to use onBlur event on Angular2?

本文关键字：onBlur 事件 Angular2      更新时间：2023-09-26

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

<input type="text">

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

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

设计文档

您还可以使用（focusout）事件：

使用 (eventName) 在将事件绑定到 DOM 时，基本上()用于事件绑定。您也可以使用 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
 }
}
您可以在

输入标签中直接使用（模糊）事件。

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

这是Github存储库上提出的答案：

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

Github：壮举（表单）：将更新模糊选项添加到表单控件

尝试使用（focusout）而不是（blur）

另一种可能的替代方案

HTML 组件文件： 

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

打字稿组件文件：

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 !== '') { }
    }
}

我最终在 Angular 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
 />

然后。。。在 .ts 中

 checkEmailBlur(f: NgForm) {
     const email = f.value.email;
相关文章：