如何在Angular 2中创建支持多正则的自定义验证器？

当然可以！在Angular 2里，你完全可以实现一个能处理多正则规则的自定义验证器，而且按照Angular表单验证的规范来做会更清晰易维护。我会帮你把现有代码改造成符合要求的版本：

第一步：调整验证器函数，符合Angular规范 #

Angular的表单验证器需要遵循特定的函数签名：接收AbstractControl参数，返回ValidationErrors | null（有错误时返回包含错误标识的对象，无错误时返回null）。我们先改造你的验证器：

import { AbstractControl, ValidationErrors } from '@angular/forms';

// 先定义需要的正则规则（你可以替换成自己的规则）
const regexRule1 = /^[A-Za-z]+$/; // 示例：仅允许字母
const regexRule2 = /^.{6,}$/;     // 示例：至少6个字符长度

export class MyComponent {
  private xbd4msjgn: string;

  // 符合Angular规范的自定义验证器
  myCustomValidator(control: AbstractControl): ValidationErrors | null {
    const inputValue = control.value;
    const validationErrors: ValidationErrors = {};

    // 校验第一个正则规则
    if (!regexRule1.test(inputValue)) {
      validationErrors['invalidPattern1'] = true;
    }

    // 校验第二个正则规则
    if (!regexRule2.test(inputValue)) {
      validationErrors['invalidPattern2'] = true;
    }

    // 如果有错误返回错误对象，否则返回null
    return Object.keys(validationErrors).length > 0 ? validationErrors : null;
  }
}

第二步：在模板中绑定验证器并显示错误 #

因为你用的是模板驱动表单（[(ngModel)]），我们需要把验证器绑定到输入控件上，并通过ngModel的实例来获取错误状态，进而显示对应提示：

<input 
  id="xbd4msjgn" 
  type="text" 
  [(ngModel)]="xbd4msjgn"
  #inputControl="ngModel"
  [ngModelOptions]="{ validators: [myCustomValidator] }"
>

<!-- 错误提示区域：仅在用户操作过输入框且控件无效时显示 -->
<div *ngIf="inputControl.invalid && (inputControl.dirty || inputControl.touched)">
  <div *ngIf="inputControl.errors?.invalidPattern1">
    输入不符合规则1：只能包含英文字母！
  </div>
  <div *ngIf="inputControl.errors?.invalidPattern2">
    输入不符合规则2：长度至少需要6个字符！
  </div>
</div>

这里的#inputControl="ngModel"是为了获取当前输入框的NgModel实例，这样我们就能访问它的invalid、dirty、touched状态，以及errors对象里的具体错误标识。

可选：让验证器更复用（抽成通用函数） #

如果你的多个组件都需要类似的多正则校验，可以把验证器抽成独立的通用函数，这样不同组件可以传入不同的规则：

// 新建一个validators.ts文件，存放通用验证器
import { AbstractControl, ValidationErrors } from '@angular/forms';

export function multiPatternValidator(patterns: { [errorKey: string]: RegExp }) {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    const errors: ValidationErrors = {};

    Object.entries(patterns).forEach(([key, regex]) => {
      if (!regex.test(value)) {
        errors[key] = true;
      }
    });

    return Object.keys(errors).length > 0 ? errors : null;
  };
}

然后在组件中使用这个通用验证器：

import { multiPatternValidator } from './validators';

export class MyComponent {
  private xbd4msjgn: string;

  // 为当前组件配置专属的正则规则
  myCustomValidator = multiPatternValidator({
    invalidPattern1: /^[A-Za-z]+$/,
    invalidPattern2: /^.{6,}$/
  });
}

模板部分和之前完全一致，这样验证器就可以在多个组件之间复用啦！

需要注意的是，你的原始代码里直接调用showErrorMessageForRegex1()这种方式不符合Angular的表单验证流程，我们通过控件的errors对象来管理错误状态，能更好地和Angular的表单状态系统结合，也更符合框架的设计思路。

内容的提问来源于stack exchange，提问作者hellzone