面试题：Angular模板驱动表单中自定义验证器的实现

创建自定义验证器指令：

首先，使用ng generate directive命令生成一个新的指令，例如email - validator。
在指令文件（email - validator.directive.ts）中编写验证逻辑。导入必要的模块：

import { Directive } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl } from '@angular/forms';

创建指令类并实现Validator接口：

@Directive({
  selector: '[appEmailValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }]
})
export class EmailValidatorDirective implements Validator {
  validate(control: AbstractControl): { [key: string]: any } | null {
    const emailRegex = /^[a - zA - Z0 - 9_.+-]+@[a - zA - Z0 - 9 -]+\.[a - zA - Z0 - 9-.]+$/;
    const valid = emailRegex.test(control.value);
    return valid? null : { 'invalidEmail': true };
  }
}

在表单中使用自定义验证器：
- 在模板驱动表单的HTML文件中，引入该指令。假设表单中有一个输入框用于输入邮箱：
```
<form #emailForm="ngForm">
  <input type="email" name="email" ngModel appEmailValidator>
  <button type="submit">提交</button>
</form>
```

处理验证失败时的错误信息显示：

使用ng - if结合emailForm.controls['email'].hasError('invalidEmail')来显示错误信息。例如：

<form #emailForm="ngForm">
  <input type="email" name="email" ngModel appEmailValidator>
  <div *ngIf="emailForm.controls['email'].hasError('invalidEmail') && (emailForm.controls['email'].touched || emailForm.controls['email'].dirty)">
    邮箱格式不正确
  </div>
  <button type="submit">提交</button>
</form>

这样就完成了在Angular模板驱动表单中创建并使用自定义邮箱格式验证器以及处理错误信息显示的过程。

星途面试题库

面试题：Angular模板驱动表单中自定义验证器的实现

知识考点

面试题答案