Angular Material自定义表单字段组件循环依赖注入错误排查

问题场景 #

我基于Angular Material开发自定义表单字段控件，要求同时支持Reactive Forms和NgModel。按照官方文档开发后，NgModel模式下组件运行正常，但切换到Reactive Forms时，实现的Validator接口中validate方法始终不被调用。

组件实现的接口：

export class MaterialMultiSelectComponent implements MatFormFieldControl<any[]>, ControlValueAccessor, Validator, OnDestroy

最初按文档配置的providers：

providers: [
    {
        provide: MatFormFieldControl,
        useExisting: MaterialMultiSelectComponent
    },   
]

看到博客提示：

Notice that without registering this class properly in NG_VALIDATORS,
the validate method will never get called.

于是添加NG_VALIDATORS注册，结果触发循环依赖错误：

providers: [
    {
        provide: MatFormFieldControl,
        useExisting: MaterialMultiSelectComponent
    },
    {
        provide: NG_VALIDATORS,
        useExisting: forwardRef(() => MaterialMultiSelectComponent),
        multi: true
    },
]

错误信息：

Error: NG0200: Circular dependency in DI detected for MaterialMultiSelectComponent

解决方案 #

问题根源是同时实现MatFormFieldControl和Validator后，额外注册NG_VALIDATORS导致的DI循环依赖。实际上，MatFormFieldControl本身已经集成了表单验证的触发机制，无需单独注册NG_VALIDATORS。

具体调整步骤：

1. 移除providers中的NG_VALIDATORS配置项，只保留MatFormFieldControl的注册。
2. 在组件内主动触发状态更新：当控件值发生变化或需要重新验证时，调用this.stateChanges.next()，通知表单字段更新状态（包括验证状态）。
3. 确保validate方法实现正确，返回ValidationErrors|null类型的结果。

代码示例 #

• 正确的validate方法实现：

validate(control: AbstractControl): ValidationErrors | null {
    // 示例：必填验证逻辑
    if (!this.value || this.value.length === 0) {
        return { required: true };
    }
    return null;
}

• 值变化时触发状态更新（比如在writeValue或自定义选择事件中）：

writeValue(value: any[]): void {
    this.value = value;
    // 通知表单字段更新状态
    this.stateChanges.next();
}

额外注意 #

确保在Reactive Forms中使用组件时，通过formControlName或formControl进行绑定，而非仅依赖ngModel。

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