面试题：Angular表单验证之异步验证处理

Question

在Angular应用的用户注册表单中有一个邮箱输入框，要求对输入的邮箱进行异步验证，确保该邮箱在数据库中不存在。请详细说明实现此异步验证的步骤，包括如何创建异步验证器，如何在表单控件中使用它，以及处理验证结果的错误提示展示，同时给出必要的代码示例。

Answer 1

创建异步验证器

1. 导入必要模块：在Angular中，创建异步验证器需要导入AbstractControl和AsyncValidatorFn。

import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

2. 编写异步验证逻辑：假设我们有一个服务UserService，它有一个方法checkEmailExists来检查邮箱是否存在于数据库。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  constructor(private http: HttpClient) {}

  checkEmailExists(email: string): Observable<boolean> {
    // 实际中这里应该是发送HTTP请求到后端检查邮箱
    return this.http.get<{ exists: boolean }>(`/api/check-email?email=${email}`)
     .pipe(
        map(response => response.exists)
      );
  }
}

3. 创建异步验证器函数：

import { Injectable } from '@angular/core';
import { AbstractControl, AsyncValidatorFn } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { UserService } from './user.service';

@Injectable({
  providedIn: 'root'
})
export class EmailAsyncValidator {
  constructor(private userService: UserService) {}

  createValidator(): AsyncValidatorFn {
    return (control: AbstractControl): Observable<{ [key: string]: any } | null> => {
      return this.userService.checkEmailExists(control.value)
       .pipe(
          map((exists: boolean) => {
            return exists ? { emailExists: true } : null;
          })
        );
    };
  }
}

在表单控件中使用异步验证器

1. 导入并注入验证器：在组件的构造函数中注入EmailAsyncValidator。

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { EmailAsyncValidator } from './email-async-validator';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})
export class RegisterComponent {
  registerForm: FormGroup;

  constructor(private emailAsyncValidator: EmailAsyncValidator) {
    this.registerForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email], this.emailAsyncValidator.createValidator())
    });
  }
}

处理验证结果的错误提示展示

1. 在模板中展示错误提示：在HTML模板中，根据验证结果显示相应的错误信息。

<form [formGroup]="registerForm">
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="registerForm.get('email').hasError('required') && (registerForm.get('email').touched || registerForm.get('email').dirty)">
      Email is required.
    </div>
    <div *ngIf="registerForm.get('email').hasError('email') && (registerForm.get('email').touched || registerForm.get('email').dirty)">
      Please enter a valid email.
    </div>
    <div *ngIf="registerForm.get('email').hasError('emailExists') && (registerForm.get('email').touched || registerForm.get('email').dirty)">
      This email already exists.
    </div>
  </div>
</form>