如何为Angular应用中所有FormControl全局添加自定义验证器？

不需要依赖额外库，利用Angular的依赖注入和类扩展机制，就能实现无需手动修改上千个控件的全局验证器添加，以下是几种可行方案：

方案一：扩展FormControl并全局替换 #

通过继承原生FormControl类，在构造函数中自动合并自定义验证器，再通过Angular的依赖注入全局替换默认的FormControl实现。

步骤1：创建自定义FormControl类 #

import { FormControl, Validators, ValidatorFn, AbstractControlOptions } from '@angular/forms';
import { mySpecialValidator } from './your-validator-path'; // 引入你的自定义验证器

export class GlobalValidatedFormControl extends FormControl {
  constructor(
    formState?: any,
    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
    asyncValidator?: any
  ) {
    let mergedValidators: ValidatorFn | ValidatorFn[] | null = null;
    let controlOptions: AbstractControlOptions | undefined;

    // 处理AbstractControlOptions类型的参数
    if (typeof validatorOrOpts === 'object' && !Array.isArray(validatorOrOpts)) {
      controlOptions = validatorOrOpts as AbstractControlOptions;
      // 可选：添加跳过全局验证器的逻辑
      if (!(controlOptions as any).skipGlobalValidator) {
        mergedValidators = Validators.compose([
          ...(controlOptions.validators ? Array.isArray(controlOptions.validators) ? controlOptions.validators : [controlOptions.validators] : []),
          mySpecialValidator
        ]);
      } else {
        mergedValidators = controlOptions.validators;
      }
      controlOptions = { ...controlOptions, validators: mergedValidators };
      super(formState, controlOptions, asyncValidator);
    } else {
      // 处理普通验证器数组/单个验证器的情况
      mergedValidators = Validators.compose([
        ...(Array.isArray(validatorOrOpts) ? validatorOrOpts : validatorOrOpts ? [validatorOrOpts] : []),
        mySpecialValidator
      ]);
      super(formState, mergedValidators, asyncValidator);
    }
  }
}

步骤2：全局提供自定义FormControl #

在根模块（如AppModule）的providers数组中添加配置，替换默认的FormControl：

import { NgModule } from '@angular/core';
import { FormControl } from '@angular/forms';
import { GlobalValidatedFormControl } from './global-validated-form-control';

@NgModule({
  // ...其他配置
  providers: [
    { provide: FormControl, useClass: GlobalValidatedFormControl }
  ]
})
export class AppModule { }

此后，无论是通过new FormControl()还是FormBuilder创建的控件，都会自动带上mySpecialValidator。如果需要跳过某个控件的全局验证器，可在创建时传入自定义选项：

// 跳过全局验证器的示例
this.formBuilder.control('', { validators: [Validators.required], skipGlobalValidator: true });

方案二：扩展FormBuilder拦截控件创建 #

如果项目主要通过FormBuilder创建表单，可以重写FormBuilder的control方法，自动注入验证器。

步骤1：创建自定义FormBuilder类 #

import { FormBuilder, FormControl, ValidatorFn, AbstractControlOptions } from '@angular/forms';
import { mySpecialValidator } from './your-validator-path';

export class GlobalFormBuilder extends FormBuilder {
  control(
    formState?: any,
    validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
    asyncValidator?: any
  ): FormControl {
    let mergedValidators: ValidatorFn | ValidatorFn[] | null = null;
    let controlOptions: AbstractControlOptions | undefined;

    // 逻辑同方案一的验证器合并逻辑
    if (typeof validatorOrOpts === 'object' && !Array.isArray(validatorOrOpts)) {
      controlOptions = validatorOrOpts as AbstractControlOptions;
      if (!(controlOptions as any).skipGlobalValidator) {
        mergedValidators = Validators.compose([
          ...(controlOptions.validators ? Array.isArray(controlOptions.validators) ? controlOptions.validators : [controlOptions.validators] : []),
          mySpecialValidator
        ]);
      } else {
        mergedValidators = controlOptions.validators;
      }
      controlOptions = { ...controlOptions, validators: mergedValidators };
      return super.control(formState, controlOptions, asyncValidator);
    } else {
      mergedValidators = Validators.compose([
        ...(Array.isArray(validatorOrOpts) ? validatorOrOpts : validatorOrOpts ? [validatorOrOpts] : []),
        mySpecialValidator
      ]);
      return super.control(formState, mergedValidators, asyncValidator);
    }
  }
}

步骤2：全局替换FormBuilder #

在根模块的providers中配置：

@NgModule({
  // ...其他配置
  providers: [
    { provide: FormBuilder, useClass: GlobalFormBuilder }
  ]
})
export class AppModule { }

这种方案仅影响通过FormBuilder创建的控件，适合以FormBuilder为主要表单创建方式的项目。

方案三：使用工厂函数动态生成FormControl #

如果不想显式扩展类，可通过工厂函数返回一个继承自FormControl的匿名类，实现全局替换：

import { FormControl, Validators, ValidatorFn, AbstractControlOptions } from '@angular/forms';
import { mySpecialValidator } from './your-validator-path';

const globalFormControlFactory = (): typeof FormControl => {
  return class extends FormControl {
    constructor(
      formState?: any,
      validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
      asyncValidator?: any
    ) {
      // 验证器合并逻辑同方案一
      let mergedValidators: ValidatorFn | ValidatorFn[] | null = null;
      let controlOptions: AbstractControlOptions | undefined;

      if (typeof validatorOrOpts === 'object' && !Array.isArray(validatorOrOpts)) {
        controlOptions = validatorOrOpts as AbstractControlOptions;
        if (!(controlOptions as any).skipGlobalValidator) {
          mergedValidators = Validators.compose([
            ...(controlOptions.validators ? Array.isArray(controlOptions.validators) ? controlOptions.validators : [controlOptions.validators] : []),
            mySpecialValidator
          ]);
        } else {
          mergedValidators = controlOptions.validators;
        }
        controlOptions = { ...controlOptions, validators: mergedValidators };
        super(formState, controlOptions, asyncValidator);
      } else {
        mergedValidators = Validators.compose([
          ...(Array.isArray(validatorOrOpts) ? validatorOrOpts : validatorOrOpts ? [validatorOrOpts] : []),
          mySpecialValidator
        ]);
        super(formState, mergedValidators, asyncValidator);
      }
    }
  };
};

然后在根模块providers中配置：

@NgModule({
  // ...其他配置
  providers: [
    { provide: FormControl, useFactory: globalFormControlFactory }
  ]
})
export class AppModule { }

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