Angular自定义组件使用formControlName报错的解决方法

No value accessor for form control with name: 'attatchmentControl'报错的本质是：Angular响应式表单的formControlName指令，无法找到和自定义<my-file-uploader>组件匹配的值访问器（ControlValueAccessor）。
Angular为所有原生表单元素（<input>、<select>等）内置了对应的值访问器，负责实现表单控件和DOM元素的值同步、状态同步，但自定义组件不会自动获得这个能力，必须手动实现对应接口，才能和响应式表单指令正常对接。

1. 修改自定义文件上传组件的TS逻辑 #

打开my-file-uploader.component.ts，实现ControlValueAccessor接口，同时注册对应的表单值访问器提供商：

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

@Component({
  selector: 'my-file-uploader',
  templateUrl: './my-file-uploader.component.html',
  // 注册自定义值访问器
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyFileUploaderComponent),
      multi: true
    }
  ]
})
export class MyFileUploaderComponent implements ControlValueAccessor {
  currentFile: File | null = null;
  private valueChangeCallback: (file: File | null) => void = () => {};
  private touchedCallback: () => void = () => {};
  disabled = false;

  // 接收表单主动写入的值（初始化、setValue/patchValue时触发）
  writeValue(value: File | null): void {
    this.currentFile = value;
  }

  // 注册值变化回调，用于组件值变更时通知表单
  registerOnChange(fn: (file: File | null) => void): void {
    this.valueChangeCallback = fn;
  }

  // 注册触碰回调，用于标记控件已交互
  registerOnTouched(fn: () => void): void {
    this.touchedCallback = fn;
  }

  // 响应表单的禁用状态设置
  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  // 处理原生文件选择事件
  handleFileSelect(event: Event) {
    const fileInput = event.target as HTMLInputElement;
    this.currentFile = fileInput.files?.[0] ?? null;
    // 同步值到表单
    this.valueChangeCallback(this.currentFile);
    // 标记控件已触碰
    this.touchedCallback();
  }
}

2. 更新自定义组件模板 #

修改my-file-uploader.component.html，给原生文件输入框绑定事件和禁用状态：

<input 
  type="file" 
  single
  [disabled]="disabled"
  (change)="handleFileSelect($event)"
>

• 不要直接在<my-file-uploader>标签上加ngDefaultControl来临时消除报错：该指令仅适配文本类输入控件，文件上传控件的返回值是File对象而非字符串，使用该指令会导致值同步失效、状态异常。
• 实现接口时必须用forwardRef注册NG_VALUE_ACCESSOR提供商，否则会出现循环依赖导致的注入报错。

修改完成后控制台报错会完全消失，表单可以正常读取附件控件的选中文件、设置控件值、同步校验/禁用状态。

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