Angular V11自定义ControlValueAccessor组件报No provider for ControlContainer错误

这个错误的核心原因是你在自定义输入组件的构造函数中直接注入了ControlContainer，该服务仅当组件被包裹在formGroup/formGroupName等响应式表单容器内部时才会被Angular自动提供，当你直接给组件传formControl实例、没有外层表单容器时，就会触发找不到提供者的错误。

解决方案 #

1. 给ControlContainer注入添加可选装饰器
   修改input.component.ts的导入和构造函数部分，让ControlContainer变成可选注入项，避免无父表单容器时报错：

// 新增导入Optional装饰器
import { Component, Input, ViewChild, Optional } from '@angular/core';

// 修改构造函数
constructor(@Optional() private controlContainer: ControlContainer) {}

2. 优化control属性的取值逻辑，增加边界判断，避免空值报错：

get control(): FormControl {
  // 优先返回直接传入的formControl
  if (this.formControl) {
    return this.formControl;
  }
  // 处理formControlName场景
  if (this.controlContainer?.control && this.formControlName) {
    const foundControl = this.controlContainer.control.get(this.formControlName);
    if (!foundControl) {
      throw new Error(`未在父FormGroup中找到名为${this.formControlName}的FormControl`);
    }
    return foundControl as FormControl;
  }
  throw new Error('使用app-input组件必须传入formControl或formControlName属性');
}

3. 检查组件使用规范

• 若使用[formControl]绑定：无需外层表单容器，直接传入FormControl实例即可正常使用
• 若使用formControlName绑定：必须将app-input组件放在绑定了[formGroup]的父元素内部，否则仍然会找不到对应的表单控件

如果修改后还有报错，确认InputComponent所在的共享模块已经导入并导出了ReactiveFormsModule、FormsModule，使用该组件的业务模块也导入了这两个模块。

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