Angular子组件出现No value accessor错误，请求解决

问题现象 #

页面加载时报错：

• "No value accessor for form control name: 'email'"
• "No value accessor for form control name: 'password'"
  同时部分表单显示信息缺失，点击提交按钮后，缺失信息恢复正常，提交功能可正常运行。

问题原因 #

父组件直接在自定义子组件<app-input>上使用formControlName，但Angular的响应式表单要求自定义组件必须实现ControlValueAccessor接口，才能让表单系统识别并绑定控件的值。当前子组件未实现该接口，导致Angular无法找到控件的值访问器，从而抛出错误。

解决方案 #

方法一：实现ControlValueAccessor接口（推荐，符合Angular表单规范） #

这是自定义表单控件的标准实现方式，能让子组件完全集成到Angular响应式表单体系中。

1. 修改子组件TS代码

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

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {
  @Input() id: string = '';
  @Input() type: string = '';
  @Input() placeHolder: string = '';
  @Input() name: string = '';
  @Input() errorMessage: string = '';
  @Input() labelText: string = '';

  private innerValue: any = '';
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  // 实现ControlValueAccessor方法：写入值到组件
  writeValue(value: any): void {
    this.innerValue = value;
  }

  // 注册值变化回调
  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
  }

  // 注册控件失焦回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

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

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

2. 修改子组件HTML代码

移除[formGroup]绑定，直接关联内部值和事件：

<div class="input__group">  
  <label class="input__label" [for]="id">{{labelText}}</label>
  <input
    class="input"
    [type]="type" 
    [value]="innerValue"
    [placeholder]="placeHolder"
    [name]="name" 
    [id]="id"
    (input)="handleInputChange($event)"
    (blur)="handleInputBlur()"
  >
  <div>
    <p>{{errorMessage}}</p>
  </div>
</div>

3. 修改父组件HTML代码

移除子组件上的[formGroup]输入，直接使用formControlName即可：

<form [formGroup]="loginFormGroup" (submit)="validateLoginData()">      
  <div class="login">
    <div class="login__input__container">
      <app-input
        type="text"                  
        formControlName="email"           
        placeHolder="mon@email.fr"
        name="email"
        id="email"
        labelText="email"
      ></app-input>           

      <app-input
        type="password"                  
        formControlName="password"           
        placeHolder="mot de passe"
        name="password"
        id="password"
        labelText="password"
      ></app-input>  
    </div>
    <div class="login__button__container">
      <input type="submit" value="se connecter">
    </div>
  </div>
</form>    

方法二：直接传递FormControl（快速临时方案） #

若不想实现ControlValueAccessor，可直接将FormGroup中的单个控件传给子组件：

1. 修改父组件HTML代码

<form [formGroup]="loginFormGroup" (submit)="validateLoginData()">      
  <div class="login">
    <div class="login__input__container">
      <app-input
        [formControl]="loginFormGroup.get('email')!"       
        type="text"                  
        placeHolder="mon@email.fr"
        name="email"
        id="email"
        labelText="email"
      ></app-input>           

      <app-input
        [formControl]="loginFormGroup.get('password')!"       
        type="password"                  
        placeHolder="mot de passe"
        name="password"
        id="password"
        labelText="password"
      ></app-input>  
    </div>
    <div class="login__button__container">
      <input type="submit" value="se connecter">
    </div>
  </div>
</form>    

2. 修改子组件TS代码

替换formGroup和formControlName输入为formControl：

import { Component, Input } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.css']
})
export class InputComponent {
  @Input() id: string = '';
  @Input() type: string = '';
  @Input() placeHolder: string = '';
  @Input() name: string = '';
  @Input() errorMessage: string ='';
  @Input() labelText: string = '';
  @Input() formControl: FormControl = new FormControl('');
}

3. 修改子组件HTML代码

直接绑定传入的FormControl：

<div class="input__group">  
  <label class="input__label" [for]="id">{{labelText}}</label>
  <input
    class="input"
    [type]="type" 
    [formControl]="formControl"   
    [placeholder]="placeHolder"
    [name]="name" 
    [id]="id"
  >
  <div>
    <p>{{errorMessage}}</p>
  </div>
</div>

补充说明 #

初始加载时显示信息缺失，是因为表单控件绑定失败，子组件输入框未正确关联FormGroup的控件状态；点击提交后触发表单验证，控件状态强制更新，因此显示恢复正常。

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