如何使用ControlValueAccessor？解决Angular自定义组件表单绑定问题

我来帮你搞定这个问题！你遇到的核心问题是没正确实现ControlValueAccessor的双向同步逻辑，咱们一步步来梳理清楚：

一、先搞懂ControlValueAccessor到底是干啥的 #

简单说，它就是Angular表单系统和你的自定义组件之间的中间翻译官：

• 当表单控件的值变化时，Angular会通过writeValue把新值传给你的组件
• 当你组件内部的输入框值变化时，你要通过onChange通知表单系统更新值
• 当用户和组件交互（比如输入框失焦）时，你要通过onTouched告诉表单“这个控件被碰过了”，用来触发验证逻辑

二、你的代码里的几个关键问题 #

1. 内部input不能用formControlName——因为你的自定义组件本身已经是一个表单控件了，直接绑定value+监听事件才对
2. writeValue只打了日志，没把表单传来的值同步到内部input上
3. registerOnChange和registerOnTouched的逻辑写反了：你应该把Angular传来的回调函数存起来，而不是直接调用它
4. 没监听内部input的输入和失焦事件，导致组件内部的变化没法同步回表单

三、修正后的完整代码 #

组件模板（HTML） #

<div class="group">
  <input 
    required 
    [value]="innerValue" 
    (input)="handleInputChange($event)"
    (blur)="handleInputBlur()"
  />
  <span class="bar"></span>
  <label>{{label}}</label>
</div>

组件类（TS） #

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

@Component({
  selector: 'ui-input-field',
  template: `
    <div class="group">
      <input 
        required 
        [value]="innerValue" 
        (input)="handleInputChange($event)"
        (blur)="handleInputBlur()"
      />
      <span class="bar"></span>
      <label>{{label}}</label>
    </div>
  `,
  styleUrls: ['input.component.css'],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputFieldComponent),
      multi: true
    }
  ]
})
export class InputFieldComponent implements OnInit, ControlValueAccessor {
  @Input() label: string;
  // 用来存储内部输入框的当前值
  private innerValue: string = '';

  constructor() { }

  ngOnInit() { }

  // 表单系统把值传给组件时调用：把值同步到内部输入框
  writeValue(value: any): void {
    if (value !== undefined && value !== null) {
      this.innerValue = value;
    }
  }

  // 存储表单系统传来的「值变化回调」
  private onChange: (value: any) => void = () => {};
  // 存储表单系统传来的「触摸回调」
  private onTouched: () => void = () => {};

  // Angular会把回调函数传进来，我们存起来就行
  registerOnChange(fn: (value: any) => void): void {
    this.onChange = fn;
  }

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

  // 内部输入框输入时触发：更新内部值，同时通知表单系统
  private handleInputChange(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    this.innerValue = inputElement.value;
    // 调用之前存的回调，把新值传给表单
    this.onChange(this.innerValue);
  }

  // 内部输入框失焦时触发：通知表单系统控件已被触摸
  private handleInputBlur(): void {
    this.onTouched();
  }
}

四、关键方法的通俗解释 #

• writeValue: 相当于表单给你的组件“发消息”：「我现在的值是X，你同步一下」，你要做的就是把X赋值给内部input的value
• registerOnChange: Angular给你留了个“联系方式”，告诉你「如果你的内部值变了，就打这个电话通知我」，你把这个联系方式存起来就行
• registerOnTouched: 同理，Angular告诉你「如果用户碰过你了，就打这个电话说一声」
• handleInputChange/handleInputBlur: 这是你自己的“监听员”，盯着内部input的动静，一旦有变化或者被碰过，就用之前存的联系方式通知表单系统

五、使用方式完全不变 #

你原来的调用代码不用改，直接用就行：

<ui-input-field formControlName="email" label="email"></ui-input-field>

这样修改后，formControlName就会正确和你的自定义组件关联，内部input的值和表单的值会双向同步，表单的验证状态也能正常触发啦！

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