自定义表单控件中访问FormControl的最优方案探讨

针对你遇到的问题，其实方案2的inject/Injector方法是可以修复的，关键是解决循环依赖和No provider for NgControl的错误，这也是目前最优雅的方案，不需要依赖Validator或者手动传入FormControl。

正确的注入方式（修复方案2） #

核心是利用inject的参数配置，跳过自身注入器去父级查找NgControl，同时配合forwardRef解决组件自身的循环引用问题：

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

@Component({
  selector: 'app-custom-input',
  template: `<input [(ngModel)]="value" />`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor, OnInit {
  value: any;
  private ngControl?: NgControl;

  ngOnInit(): void {
    // 跳过自身注入器，从父级表单指令（如formControlName）获取NgControl
    this.ngControl = inject(NgControl, { optional: true, skipSelf: true });
    
    if (this.ngControl) {
      // 这里就能直接拿到对应的FormControl实例
      const formControl = this.ngControl.control;
      // 可以在这里监听控件状态变化、操作验证器等
      formControl.statusChanges.subscribe(status => {
        console.log('控件状态变化:', status);
      });
    }
  }

  // 实现ControlValueAccessor的必填方法
  writeValue(obj: any): void {
    this.value = obj;
  }

  registerOnChange(fn: any): void {
    // 绑定值变化回调
    const onChange = (value: any) => {
      fn(value);
    };
  }

  registerOnTouched(fn: any): void {
    // 绑定触摸回调
  }

  setDisabledState?(isDisabled: boolean): void {
    // 处理禁用状态
  }
}

为什么之前的方案2会报错？ #

1. No provider for NgControl：NgControl是由父级的表单指令（如formControlName、formControl）提供的，不是组件自身，直接inject(NgControl)会在自身注入器中查找，自然找不到。添加skipSelf: true后，注入器会向上查找父级提供的NgControl。
2. 循环依赖：组件的NG_VALUE_ACCESSOR提供者引用了组件自身，用forwardRef(() => CustomInputComponent)可以解决Angular在编译时无法识别未定义组件的问题，避免循环依赖报错。

另一种备选方案（利用Injector异步获取） #

如果上面的方式还是有问题，可以通过Injector在组件初始化后异步获取NgControl：

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

@Component({
  selector: 'app-custom-input',
  template: `<input [(ngModel)]="value" />`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor, OnInit {
  value: any;
  private ngControl?: NgControl;

  constructor(private injector: Injector) {}

  ngOnInit(): void {
    // 异步获取，避开初始化时的循环依赖
    setTimeout(() => {
      this.ngControl = this.injector.get(NgControl);
      const formControl = this.ngControl?.control;
    });
  }

  // 省略ControlValueAccessor的实现方法...
}

这种方式的原理是延迟获取NgControl，等到组件和表单指令都初始化完成后再获取，也能避开循环依赖问题，但相比第一种方法不够优雅，优先推荐第一种。

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