如何获取Angular FormControl的全部验证器？最佳实践探讨

我有一个自定义FormControl组件，全程使用响应式表单，需要在组件内获取父组件为该表单控件配置的验证器列表，不需要注入NG_VALIDATORS，也不需要自定义验证器。

示例代码 #

parent.component.ts #

export class ParentComponent {

  public loginForm: FormGroup = this.fb.group({
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', [
      Validators.required,
      Validators.minLength(6),
    ]),
  });
}

parent.component.html #

<form [formGroup]="loginForm">
    <child-component type="email" formControlName="email"></child-component>
    <child-component type="password" formControlName="password"></child-component>
</form>

child.component.ts #

export class ChildComponent implements ControlValueAccessor, AfterViewInit {

    valueControl = new FormControl('');  
    constructor( private injector: Injector ) { }

    ngAfterViewInit() {
      const ngControl = this.injector.get(NgControl);
      // 我需要类似这样的代码：const validators = ngControl.control?.validatorsList;      
      this.valueControl.setValidators(validators);
    }

  // 实现ControlValueAccessor接口的相关代码
}

child.component.html #

<mat-form-field>
  <input
    matInput
    [type]="type"
    [formControl]="valueControl"
  />
</mat-form-field>

已尝试的解决方案 #

• 方案1：通过@Input传递验证器列表

  parent.component.ts #

  export class ParentComponent {
  
    emailValidators = [Validators.required, Validators.email];
  
    public loginForm: FormGroup = this.fb.group({
      email: new FormControl('', emailValidators),
      password: new FormControl('', [
        Validators.required,
        Validators.minLength(6),
      ]),
    });
  }
  

  parent.component.html #

  <form [formGroup]="loginForm">
      <child-component [validators]="emailValidators" type="email" formControlName="email"></child-component>
  </form>
  

  child.component.ts #

  export class ChildComponent implements ControlValueAccessor {
      
      @Input() validators;
      valueControl = new FormControl('');  
      constructor( private injector: Injector ) {
          this.valueControl.setValidators(this.validators);
      }
  
    // 实现ControlValueAccessor接口的相关代码
  }
  

• 方案2：监听表单控件错误并设置验证器（存在性能负担）

  child.component.ts #

  export class ChildComponent implements ControlValueAccessor, AfterViewInit {
  
      valueControl = new FormControl('');  
      constructor( private injector: Injector ) { }
      ngControl.control?.statusChanges.subscribe(() => {
        // 使用ngControl.control?.errors
      });
  
    // 实现ControlValueAccessor接口的相关代码
  }
  

疑问 #

1. 有没有解决该问题的最佳实践？
2. Angular的AbstractControl为何不提供获取验证器列表的公开方法，仅提供_rawValidators这类私有变量？

1. 最佳实践 #

复用父控件验证逻辑（推荐） #

子组件里维护独立valueControl的必要性很低——既然已经通过ControlValueAccessor和父控件绑定，完全可以直接基于父控件的状态做UI反馈，不需要复制验证器到子控件。

如果一定要保留子组件的独立FormControl，更合理的同步验证逻辑的方式是：

export class ChildComponent implements ControlValueAccessor, AfterViewInit {
    valueControl = new FormControl('');  
    private ngControl: NgControl;

    constructor(private injector: Injector) { }

    ngAfterViewInit() {
      this.ngControl = this.injector.get(NgControl);
      // 直接复用父控件的验证逻辑，无需复制验证器列表
      this.valueControl.setValidators(() => {
        return this.ngControl.control?.validator?.(this.valueControl) || null;
      });
      // 监听值变化触发验证同步
      this.valueControl.valueChanges.subscribe(() => {
        this.valueControl.updateValueAndValidity();
      });
    }

    // 实现ControlValueAccessor接口的相关代码
}

不推荐@Input传递验证器的原因 #

这种方式会增加代码冗余，父组件需要额外维护验证器变量；如果后续父控件通过setValidators动态修改验证器，子组件无法自动同步，还要手动处理变更检测，维护成本高。

2. 为什么AbstractControl不公开验证器列表？ #

核心原因有两点：

• 封装性要求：验证器属于控件内部实现细节，Angular希望开发者通过公开API（比如setValidators、errors、updateValueAndValidity）操作和获取验证状态，避免依赖内部实现导致版本升级时的兼容性问题。
• 设计意图导向：Angular验证体系更关注验证结果而非验证器本身，开发者通常只需要知道控件是否有效、有哪些错误，而非直接操作验证器列表。如果需要动态修改验证器，setValidators、addValidators等公开方法已经能满足需求。

另外，_rawValidators是Angular内部存储验证器的私有变量，不属于公开API，直接访问会违反设计原则，且后续版本可能被修改或移除，存在风险。

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