Angular自定义FormControl获取父表单验证状态的实现疑问

现有实现的合理性 #

你当前通过Validator接口的validate方法获取外部控件实例的方案可正常运行，Angular每次触发校验时都会将外部绑定的AbstractControl实例传入该方法，赋值操作本身没有逻辑错误，但存在几处不符合规范和可优化的点：

• validate方法设计初衷是返回自定义控件自身的校验错误，你当前没有返回值，相当于自定义控件内部的校验状态（如firstName/lastName的必填校验）无法同步给父表单，不符合接口设计规范
• registerOnChange中直接订阅form.valueChanges未做取消订阅处理，组件销毁时存在内存泄漏风险
• 依赖validate方法的调用时机赋值外部控件，逻辑耦合度高，不够灵活

优化实现方案 #

1. 用依赖注入直接获取外部控件（推荐） #

不需要依赖validate方法，直接在构造函数中注入NgControl即可拿到外部绑定的表单控件实例，逻辑更清晰：

import { NgControl } from '@angular/forms';
import { Self, Optional } from '@angular/core';

constructor(@Self() @Optional() public ngControl: NgControl) {
  this.initForm();
  if (this.ngControl) {
    // 直接绑定valueAccessor，不需要再注册NG_VALUE_ACCESSOR提供者
    this.ngControl.valueAccessor = this;
  }
}

注入后可直接通过this.ngControl.control访问外部控件的所有属性和方法，包括：

• 校验错误：this.ngControl.control.errors
• 判断是否触发指定错误：this.ngControl.control.hasError('required')
• 读取绑定的校验器：this.ngControl.control.validator

2. 按需调整Validator接口实现 #

如果你不需要将自定义控件内部的校验错误暴露给父表单，可直接删除NG_VALIDATORS提供者配置和Validator接口的实现，完全满足你读取父表单校验状态的需求。
如果需要同步内部错误给父表单，修正validate方法的返回值即可：

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

validate(ctrl: AbstractControl): ValidationErrors | null {
  return this.form.valid ? null : this.form.errors;
}

3. 修复内存泄漏问题 #

订阅valueChanges时存储订阅实例，组件销毁时取消订阅：

import { Subscription } from 'rxjs';

private valueChangeSub: Subscription;

registerOnChange(fn: (value: any) => void): void {
  this._onChange = fn;
  // 避免重复订阅
  if (this.valueChangeSub) this.valueChangeSub.unsubscribe();
  this.valueChangeSub = this.form.valueChanges.subscribe(fn);
}

ngOnDestroy(): void {
  this.valueChangeSub?.unsubscribe();
}

4. 判断父表单是否配置指定校验器 #

可通过调用外部控件的校验器方法判断是否存在指定校验规则，以required为例：

get isRequired(): boolean {
  if (!this.ngControl?.control?.validator) return false;
  const testErrors = this.ngControl.control.validator(new FormControl(null));
  return !!testErrors?.['required'];
}

最终简化方案 #

如果只需要读取父表单的校验状态，不需要暴露内部错误，可直接删除NG_VALUE_ACCESSOR、NG_VALIDATORS两个提供者配置，移除Validator接口实现，仅保留ControlValueAccessor接口和NgControl注入即可，代码更简洁且符合Angular设计规范。

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