Angular动态表单中自定义组件报No value accessor for form control path错误

下面是针对NG01203: No value accessor for form control path错误的几个有效修复方案：

1. 校验NG_VALUE_ACCESSOR提供者配置 #

确保自定义组件的提供者配置正确，必须包含multi: true并使用forwardRef避免提前引用问题：

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

@Component({
  selector: 'app-form-control',
  templateUrl: './form-control.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => AppFormControlComponent),
      multi: true
    }
  ]
})
export class AppFormControlComponent implements ControlValueAccessor {
  // ... 组件逻辑
}

2. 完整实现ControlValueAccessor接口 #

必须实现接口的核心方法，确保表单控件能正确同步值和状态：

innerValue: any;
isDisabled = false;
onChange: (value: any) => void = () => {};
onTouched: () => void = () => {};

writeValue(value: any): void {
  this.innerValue = value;
}

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

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

setDisabledState(isDisabled: boolean): void {
  this.isDisabled = isDisabled;
}

// 组件内部值变化时主动通知表单
onInputChange(value: any) {
  this.innerValue = value;
  this.onChange(value);
}

// 组件失去焦点时标记为已触碰
onInputBlur() {
  this.onTouched();
}

3. 避免formControlName与NgControl注入冲突 #

如果在自定义组件中注入了NgControl，不要在模板中同时使用formControlName，改用直接传递FormControl：

• 自定义组件构造函数：

import { NgControl, Self } from '@angular/forms';

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

• 父组件模板：

<div formArrayName="providers">
  <div *ngFor="let group of providersArray.controls; let i = index" [formGroupName]="i">
    <app-form-control [formControl]="group.get('provider_license')"></app-form-control>
  </div>
</div>

如果保留formControlName绑定，则移除NgControl的注入逻辑，确保NG_VALUE_ACCESSOR配置正确即可。

4. 检查父组件FormArray初始化逻辑 #

确保FormArray中的每个FormGroup都正确包含目标FormControl：

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({/* ... */})
export class ParentComponent {
  providersForm = this.fb.group({
    providers: this.fb.array([])
  });

  get providersArray(): FormArray {
    return this.providersForm.get('providers') as FormArray;
  }

  constructor(private fb: FormBuilder) {
    // 初始化一个默认的表单组
    this.addProvider();
  }

  createProviderGroup(): FormGroup {
    return this.fb.group({
      provider_license: ['', Validators.required]
      // 其他表单字段
    });
  }

  addProvider() {
    this.providersArray.push(this.createProviderGroup());
  }

  removeProvider(index: number) {
    this.providersArray.removeAt(index);
  }
}

父组件模板要正确绑定FormArray和FormGroup：

<form [formGroup]="providersForm">
  <div formArrayName="providers">
    <div *ngFor="let group of providersArray.controls; let i = index" [formGroupName]="i">
      <app-form-control formControlName="provider_license"></app-form-control>
      <button (click)="removeProvider(i)">移除</button>
    </div>
  </div>
  <button (click)="addProvider()">添加提供者</button>
</form>

5. 避免自定义组件内部的表单控件冲突 #

如果自定义组件内部使用了原生input，不要直接绑定外部表单控件，而是通过ControlValueAccessor的逻辑同步值，比如：

<!-- 自定义组件模板 -->
<input 
  [value]="innerValue"
  [disabled]="isDisabled"
  (input)="onInputChange($event.target.value)"
  (blur)="onInputBlur()"
/>

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