Angular 18组件复用报错：NG01203 表单控件无值访问器

问题原因 #

自定义的app-input组件未实现Angular表单系统要求的值访问器（ControlValueAccessor），导致Angular无法将其识别为合法的表单控件，从而抛出该错误。

解决方案 #

修改InputComponent，实现ControlValueAccessor接口并注册对应的提供者，让组件能与Angular表单系统无缝集成。

1. 更新组件类逻辑 #

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

type InputProps = {
  type: 'text' | 'password' | 'number';
  label: string;
  placeholder: string;
  checkValidation: boolean;
}

@Component({
  selector: 'app-input',
  standalone: true,
  imports: [
    FormsModule,
    ReactiveFormsModule,
    NgClass
  ],
  templateUrl: './input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {
  public readonly label = input.required<InputProps['label']>();
  public readonly checkValidation = input<InputProps['checkValidation']>(false);
  public readonly placeholder = input<InputProps['placeholder']>();

  public type = input<InputProps['type']>('text');
  public innerValue = '';

  // ControlValueAccessor 接口方法
  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

  writeValue(value: string): void {
    this.innerValue = value || '';
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

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

  // 处理输入值变化
  handleInputChange(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    this.innerValue = inputElement.value;
    this.onChange(this.innerValue);
  }

  // 处理输入框失焦
  handleInputBlur(): void {
    this.onTouched();
  }
}

2. 调整组件模板 #

移除原有的formControlName和[value]绑定，改为绑定输入事件与失焦事件：

<div>
  <input
    [type]="type()"
    [id]="label()"
    [ngClass]="inputBaseClasses"
    [placeholder]="placeholder()"
    [value]="innerValue"
    (input)="handleInputChange($event)"
    (blur)="handleInputBlur()"
  />
  <label [for]="label()" [ngClass]="labelBaseClasses">
    {{ label() }}
  </label>
</div>

3. 父组件使用方式简化 #

现在可直接将formControlName绑定到app-input组件，无需传递formGroup：

<!-- 父组件示例（如RegisterComponent模板） -->
<form [formGroup]="signUpForm">
  <app-input 
    label="Name"
    formControlName="name" 
  ></app-input>
</form>

核心说明 #

• ControlValueAccessor是Angular自定义表单组件的标准接口，负责在组件与表单控件之间双向同步值。
• 注册NG_VALUE_ACCESSOR提供者，明确告知Angular该组件可作为表单控件的值访问器。
• 移除原组件中冗余的formGroup和formControlName输入，让组件本身成为表单控件的载体，直接与父表单绑定。

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