使用ControlValueAccessor时双输入值源不同步问题咨询

我帮你分析了这个自定义输入组件的同步问题，核心是没有正确实现ControlValueAccessor中视图、组件内部状态和外部表单模型三者的双向联动。你遇到的两种异常场景，本质上都是同步链路断了：

问题根源拆解 #

• 当你修改输入框时，只通知了FormGroup更新，但组件自身的value属性没同步，导致组件内部状态和视图/表单脱节；
• 当点击组件内的按钮修改值时，只改了组件的value，但没触发onChange回调通知表单，也没让输入框视图同步更新；
• writeValue方法没有正确把表单的初始值或变更值同步到组件内部状态，导致视图和表单初始值不一致。

具体修复方案 #

1. 用Getter/Setter包裹组件内部值，联动表单回调 #

修改组件类的value属性，通过getter/setter确保每次值变化都能通知表单模型：

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

@Component({
  selector: 'my-input',
  templateUrl: './my-input.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyInputComponent),
      multi: true
    }
  ]
})
export class MyInputComponent implements ControlValueAccessor {
  private _value: string = '';
  onChange: any = () => {};
  onTouched: any = () => {};

  get value(): string {
    return this._value;
  }

  set value(val: string) {
    if (val !== this._value) {
      this._value = val;
      this.onChange(val); // 通知外部表单模型更新
      this.onTouched(); // 标记控件为已触碰
    }
  }

  writeValue(value: string): void {
    // 同步外部表单的值到组件内部状态
    if (value !== this._value) {
      this._value = value;
    }
  }

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

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

  changeValueRandomly() {
    // 直接修改value，setter会自动触发onChange同步表单
    this.value = Math.random().toString(36).substring(2, 10);
  }
}

2. 修正模板的双向绑定逻辑 #

把输入框的绑定改成双向绑定到组件的value，同时绑定blur事件触发onTouched：

<div>
  <input type="text" [(ngModel)]="value" (blur)="onTouched()" />
  <button (click)="changeValueRandomly()">Change value randomly</button>
  <p>Component value: {{ value }}</p>
</div>

为什么这样修复？ #

• Getter/Setter：确保组件内部值的任何变更（不管是输入框修改还是按钮触发），都会自动调用onChange通知外部表单，同时触发视图更新；
• writeValue：负责接收外部表单的初始值或变更值，同步到组件内部状态，保证视图和表单初始值一致；
• 双向绑定+blur事件：让输入框的视图变化同步到组件内部，同时标记控件为已触碰（满足表单验证的touched状态需求）。

这样修改后，不管是修改输入框、点击组件按钮，还是外部表单修改值，三者（组件状态、视图、FormGroup）都会保持同步。

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