在Angular中使用onBlur事件的教程

在本教程中，我们将学习如何在Angular中使用输入onBlur事件。

首先，什么是onBlur event ？它在Angular中的应用？

onBlur 是一个javascript事件，当输入元素失去焦点时被触发。这个事件将应用于以下输入表单元素

• 文本
• 文本区
• 复选框
• 读取器
• 按钮
• 标签

其他版本可供选择。

在做表单验证时，这将是非常有用的。

html onblur Syntax：

<inputformelement onBlur="eventname"> </inputformelement>

在Angular中，这将被用来做表单验证，即客户端或服务器端。就像在html中，Angular将有模糊事件而不是onBlur。

我们将解释Different examples using blur event in Angular

如何在Angular中使用onBlur事件

onBlur事件可以使用事件绑定来捕获，在Angular中，事件绑定是用来将事件绑定到DOM元素。语法是（事件绑定）:

(event binding)

这是一种绑定方式，将数据从HTML绑定到控制器。输入元素被添加了blur 属性

<input type="text" (blur)="blurEventMethod($event)">

一旦焦点从这个输入中消失就会被调用。$event 被传递给模糊方法。

<div>
    <h2>{{ heading | titlecase }}</h2>
    <input type="text" (blur)="blurEvent($event)">
    <div>
        Output is {{enteredEmail}}
    </div>
</div>

宣告的方法在焦点从html上消失时被调用。使用event.target.value 读取输入值。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading="angular blur tutorial with examples";
  enteredEmail:string="";
  
  blurEvent(event: any) {
    this.enteredEmail=event.target.value;
    console.log(this.enteredEmail);
}
}

与模糊的双向绑定

在Angular中，双向绑定是通过ngModel属性实现的。ngModel属性从控制器绑定到html，而html绑定到控制器。

为了实现双向绑定，请在应用程序模块中包含formsmodule 。

    <input type="text" [(ngModel)]="email" (blur)="blurEvent()">

在控制器中声明绑定变量，在模糊事件中，你可以直接访问该变量

  enteredEmail: string = '';
  email: string = '';
  blurEvent(event: any) {
    this.enteredEmail = this.email;
    console.log(this);
  }

在模糊事件中调用服务

模板驱动的输入表单验证的模糊化

首先，模板驱动的表单是angular表单处理的一种，允许你做表单验证，这些使用ngModel 和ngModelOptions ，本地引用哈希。

这是从angular 5版本开始工作的，模板输入表单组件没有定义表单方法。

• 输入元素有ngModel指令，可以进行双向绑定。
• ngModelOptions 指令，以改变以下行为ngModel
• 这里的电子邮件模型被绑定到blur 事件中。updateOn
• 创建emailerror引用来捕捉错误，true - email是空的，false - email已经输入。
• 这将使电子邮件所需的验证显示给用户

<div>
    <h2>{{ heading | titlecase }}</h2>
    <input type="text" [(ngModel)]="email" [ngModelOptions]="{ updateOn: 'blur' }" #emailerror="ngModel" required />
    <div *ngIf="!emailerror.valid">
        <span style="background-color: red">Email is required </span>
    </div>
    <button type="submit ">Submit</button>
</div>

模板表单组件控制器必须声明ngModel属性值email。

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading = 'angular blur validation with examples';

  email: string = '';
  constructor() {}
}

反应式表单是另一种处理输入数据的表单方法，它使用FormGroup 和formControlName 。

• 表单组件声明emailForm的类型FormGroup
• emailForm实例是用FormGroup创建的，包含验证器和blur 事件的updateOn。
• emailForm与定义的模板表单相联系。

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  heading = 'angular blur validation with examples';
  emailForm: FormGroup;

  myusername: string = '';
  constructor() {
    this.emailForm = new FormGroup({
      email: new FormControl('', {
        validators: Validators.required,
        updateOn: 'blur',
      }),
    });
  }
}

应用程序组件html用于显示输入表单以及验证错误:

• 用formGroup 指令声明表单，将emailForm绑定到FormGroup。
• 为输入元素添加了formControlName
• 在应用组件html中配置了模糊的事件
• 如果表单控件无效且触摸事件通过，则显示错误。

<div>
    <h2>{{ heading | titlecase }}</h2>
    <form [formGroup]="emailForm">
        <input type="text" formControlName="email" />
        <div *ngIf="
        !emailForm.controls['email'].valid &&
        emailForm.controls['email'].touched
      ">
            <span style="background-color: red">Email is required </span>
        </div>
    </form>
    <button type="submit ">Submit</button>
</div>

在浏览器中显示的输出是

总结

在本教程中，你学到了以下内容

• 模糊事件在angular中的应用
• ngModel的模糊事件
• 模板表单输入中的模糊验证,ngModelOptions
• 反应式表单验证的使用blur