面试题：Angular模板驱动表单中自定义验证指令与ngModel的协同工作

创建自定义邮箱格式验证指令：

首先，使用Angular CLI生成指令，命令如下：

ng generate directive emailValidator

在生成的emailValidator.directive.ts文件中编写指令逻辑：

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

@Directive({
  selector: '[appEmailValidator]',
  providers: [
    { provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true }
  ]
})
export class EmailValidatorDirective implements Validator {
  constructor() {}

  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 : { 'emailInvalid': true };
  }
}

这里通过实现Validator接口中的validate方法来进行邮箱格式验证。使用正则表达式判断输入值是否符合邮箱格式，若不符合则返回一个包含错误标识的对象，否则返回null表示验证通过。

与ngModel协同工作：
- 在模板驱动表单中，将自定义指令应用到input元素上，并绑定ngModel：
```
<form #myForm="ngForm">
  <input type="email" [(ngModel)]="email" name="email" appEmailValidator required>
  <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>
```
- ngModel会与表单控件进行双向数据绑定，同时会触发自定义验证指令的validate方法。当用户输入内容时，ngModel会更新控件的值，进而触发验证。当表单提交时，ngModel会收集所有控件的值，并结合验证结果判断整个表单是否有效。如果email输入框的值不符合邮箱格式，自定义验证指令返回的错误标识会被添加到控件的errors对象中，导致整个表单无效，提交按钮被禁用。
处理验证失败时的错误提示显示：
- 可以通过ngForm和ngModel提供的状态来显示错误提示。在模板中添加如下代码：
```
<form #myForm="ngForm">
  <input type="email" [(ngModel)]="email" name="email" appEmailValidator required>
  <div *ngIf="myForm.controls['email'].hasError('emailInvalid') && (myForm.controls['email'].touched || myForm.controls['email'].dirty)">
    Please enter a valid email address.
  </div>
  <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>
```
- 这里使用*ngIf指令来判断email控件是否存在emailInvalid错误，并且控件是否被触摸（touched）或值已改变（dirty）。如果满足条件，则显示错误提示信息，告知用户输入的邮箱格式不正确。

星途面试题库

面试题：Angular模板驱动表单中自定义验证指令与ngModel的协同工作

知识考点

面试题答案