ControlValueAccessor中绑定FormControl同步验证器是否合理？

你提到的这套实现可以运行，但不属于Angular推荐的最佳实践，也是验证器被重复调用两次的直接诱因。

现有实现的核心缺陷 #

• 无意义的实例开销：代码开头先初始化了一个独立的空FormControl实例，直到ngAfterViewInit生命周期才将变量引用替换为注入的NgControl持有的真实控件实例，最初创建的FormControl从未被实际使用，会产生不必要的内存分配与回收。
• 重复触发校验的根源：一方面，如果既在构造函数手动赋值ngControl.valueAccessor = this，又在组件装饰器的providers里注册了NG_VALUE_ACCESSOR，会导致值访问器被重复注册，Angular会两次执行控件校验流程。另一方面，就算没有重复注册，ngAfterViewInit阶段才替换控件引用，会让Angular先对初始创建的空FormControl执行一次校验，替换引用后再对真实控件执行一次校验，同样会触发两次验证器调用。

标准实现方案 #

完全不需要单独声明内部FormControl再做引用中转，两种合规写法二选一即可，禁止混写：

写法1：官方提供者注册（兼容性最好） #

import { Component, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';

@Component({
  selector: 'app-custom-form-control',
  template: `
    <!-- 模板直接绑定注入的ngControl.control即可，无需额外中转 -->
    <input type="text" [formControl]="ngControl.control" (blur)="onTouched()">
    <div class="error-tip" *ngIf="ngControl.control.touched && ngControl.control.errors as errors">
      <span *ngIf="errors['required']">该项为必填项</span>
    </div>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomFormControlComponent),
      multi: true
    }
  ]
})
export class CustomFormControlComponent implements ControlValueAccessor {
  private onChange = (_value: any) => {};
  private onTouched = () => {};

  constructor(public ngControl: NgControl) {
    // 此处禁止手动给ngControl.valueAccessor赋值
  }

  // 实现ControlValueAccessor要求的接口方法
  writeValue(value: any): void {
    // 处理外部传入值的渲染逻辑
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  setDisabledState(isDisabled: boolean): void {
    // 可选实现：处理控件禁用状态的样式、交互逻辑
  }
}

写法2：构造函数手动挂载（代码更简洁） #

如果不想写forwardRef和冗长的提供者配置，可以直接在构造函数中挂载值访问器，注意必须删除组件providers中所有NG_VALUE_ACCESSOR相关的注册配置，避免重复注册：

@Component({
  selector: 'app-custom-form-control',
  template: '和上述写法的模板完全一致，直接绑定ngControl.control即可'
  // 不要添加NG_VALUE_ACCESSOR相关的provider
})
export class CustomFormControlComponent implements ControlValueAccessor {
  private onChange = (_value: any) => {};
  private onTouched = () => {};

  constructor(public ngControl: NgControl) {
    this.ngControl.valueAccessor = this;
  }

  // 其余接口实现逻辑和写法1完全一致
}

验证器同步逻辑说明 #

不需要额外编写代码同步验证器：只要正确实现了ControlValueAccessor接口，宿主元素上绑定的所有内置校验器（如required、minLength、pattern）、自定义同步/异步校验器，都会自动挂载到ngControl.control实例上，模板中直接读取ngControl.control.errors、ngControl.control.status、ngControl.control.touched等属性即可获取准确的校验状态，不需要在ngAfterViewInit阶段做引用替换操作。

避坑提示：两种标准写法都不需要提前初始化独立的FormControl变量，直接使用注入的ngControl.control即可，从根源上避免重复校验、状态不同步的问题。

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