如何使用RemoveValidators移除带参数的Angular自定义验证器

Angular 12+提供的removeValidators方法需要依赖验证器的原始引用，但带参数的自定义验证器（比如myCustomValidator(5)）每次调用都会返回新的函数实例，导致直接调用removeValidators无法匹配到目标验证器，这是核心痛点。下面是几种可行的解决方法：

方案1：缓存验证器引用（推荐，精准可控） #

创建带参数的验证器时，将生成的函数实例缓存到组件变量中，添加和移除都使用这个缓存的引用，确保两者是同一个实例。

import { Component } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';

// 自定义带参数的验证器
function minLengthValidator(minLength: number) {
  return (control: FormControl) => {
    return control.value?.length < minLength ? { minLength: { requiredLength: minLength, actualLength: control.value?.length || 0 } } : null;
  };
}

@Component({
  selector: 'app-root',
  template: `
    <input [formControl]="nameControl" placeholder="至少输入5个字符">
    <button (click)="addValidator()">添加长度验证</button>
    <button (click)="removeValidator()">移除长度验证</button>
    <p *ngIf="nameControl.hasError('minLength')">长度不能少于{{ nameControl.getError('minLength').requiredLength }}位</p>
  `
})
export class AppComponent {
  nameControl = new FormControl('');
  // 缓存带参数的验证器实例
  private cachedMinLengthValidator: any;

  addValidator() {
    // 生成验证器并缓存
    this.cachedMinLengthValidator = minLengthValidator(5);
    this.nameControl.addValidators([this.cachedMinLengthValidator, Validators.required]);
    this.nameControl.updateValueAndValidity();
  }

  removeValidator() {
    // 使用缓存的引用移除
    this.nameControl.removeValidators([this.cachedMinLengthValidator]);
    // 可选：关闭事件触发，避免不必要的表单值变更通知
    this.nameControl.updateValueAndValidity({ emitEvent: false });
  }
}

方案2：替换验证器数组（无需缓存，适合复杂场景） #

如果不想提前缓存引用，可以给自定义验证器添加唯一标识属性，之后通过过滤验证器数组的方式替换掉目标验证器。

// 给自定义验证器添加标识属性
function minLengthValidator(minLength: number) {
  const validatorFn = (control: FormControl) => {
    return control.value?.length < minLength ? { minLength: true } : null;
  };
  // 添加自定义标识，用于后续识别
  validatorFn.identifier = 'minLength';
  validatorFn.targetLength = minLength;
  return validatorFn;
}

// 组件内的移除方法
removeValidator() {
  // 获取当前控件的验证器（注意：如果是多个验证器，可能需要处理数组形式）
  const currentValidators = this.nameControl.validator ? [this.nameControl.validator] : [];
  
  // 过滤掉目标验证器
  const updatedValidators = currentValidators.filter(validator => {
    // 匹配标识和参数，精准移除
    return !(validator.identifier === 'minLength' && validator.targetLength === 5);
  });

  // 设置新的验证器数组
  this.nameControl.setValidators(updatedValidators);
  this.nameControl.updateValueAndValidity({ emitEvent: false });
}

这种方法适合动态生成多个带不同参数的验证器场景，通过标识精准定位要移除的目标。

方案3：清空后重新添加（最简粗暴） #

如果表单的验证逻辑简单，直接清空所有验证器后，重新添加需要保留的验证器即可：

removeValidator() {
  // 清空所有验证器
  this.nameControl.clearValidators();
  // 重新添加需要保留的验证器（比如必填验证）
  this.nameControl.addValidators([Validators.required]);
  this.nameControl.updateValueAndValidity({ emitEvent: false });
}

这种方式无需处理引用或标识，适合验证器数量少、逻辑简单的场景。

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