Angular如何从FormControl实例中获取所有已绑定的验证器列表

Angular 公开API确实不支持直接从FormControl实例中提取已绑定的单个验证器列表，但要实现追加自定义验证器的需求有多个成熟方案可落地。

方案1：Angular 12及以上版本直接用内置API #

Angular 12开始AbstractControl（FormControl的父类）新增了验证器增删API，直接调用即可：

// 直接追加自定义验证器，支持传入单个验证器或验证器数组
ctrl.addValidators(myOwnValidator);
// 如果要追加异步验证器，调用 addAsyncValidators 方法

// 追加后必须调用该方法触发验证状态更新
ctrl.updateValueAndValidity();

配套还有removeValidators、hasValidator方法可以直接操作验证器，完全满足需求。

方案2：低版本Angular自行维护验证器列表 #

如果使用的Angular版本低于12，最稳妥的方案是初始化时自行存储验证器列表的引用：

// 初始化时把默认验证器存为独立变量
const defaultValidators = [Validators.minLength(8), Validators.required];
const ctrl = new FormControl(null, defaultValidators);

// 需要追加验证器时
ctrl.setValidators([...defaultValidators, myOwnValidator]);
ctrl.updateValueAndValidity();

方案3：低版本且无法拿到初始验证器引用的场景 #

如果无法获取初始验证器的列表引用，可以直接对已有的组合验证器进行扩展，不需要拆分出单个验证器：

// 保存原有组合验证器
const originalSyncValidator = ctrl.validator;

ctrl.setValidators(control => {
  // 先执行原有验证逻辑获取错误
  const originalErrors = originalSyncValidator?.(control);
  // 执行新的自定义验证逻辑
  const newErrors = myOwnValidator(control);
  // 合并错误结果返回
  return { ...originalErrors, ...newErrors };
});

ctrl.updateValueAndValidity();

异步验证器的追加逻辑完全一致，替换为ctrl.asyncValidator和setAsyncValidators即可。

你之前尝试的两种方法逻辑存在偏差：调用ctrl.validator()传入模拟的Control实例，得到的是验证执行后的错误结果对象，不是验证器函数本身，自然无法拿到验证器列表。

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