Angular中使用ControlValueAccessor时两个ngModel状态异常问题

问题原因 #

你的自定义组件内部的<input>使用了[(ngModel)]双向绑定，同时组件本身实现ControlValueAccessor接口对接外部ngModel，造成两层ngModel绑定冲突。另外所有内部input的name属性均设为input，Angular表单系统会因name重复导致控件状态（如touched）被错误共享，最终出现一个组件触发touched后，所有同name控件状态同步变化的问题。

解决方案 #

移除自定义组件内部的ngModel绑定，直接通过原生input事件和ControlValueAccessor接口完成数据交互，同时通过blur事件触发touched状态（更符合Angular表单控件的touched定义），确保每个组件实例状态完全独立。

修改后的自定义组件模板 #

<div>
  <input
    [value]="value"
    (input)="onInputChange($event)"
    (blur)="onInputBlur()"
  />
</div>

修改后的自定义组件类 #

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

@Component({
  selector: 'app-custom-input',
  templateUrl: './custom-input-component.html',
  styleUrls: ['./custom-input-component.less'],
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInputComponent),
    multi: true,
  }],
})
export class CustomInputComponent implements ControlValueAccessor {
  value = '';

  onChange: (value: string) => void = () => {};
  onTouched: () => void = () => {};

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

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

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

  onInputChange(event: Event): void {
    const inputValue = (event.target as HTMLInputElement).value;
    this.value = inputValue;
    this.onChange(inputValue);
  }

  onInputBlur(): void {
    this.onTouched();
  }
}

父组件代码（无需修改） #

<app-custom-input
  #firstInput="ngModel"
  [(ngModel)]="firstInputValue"
></app-custom-input>
<app-custom-input
  #secondInput="ngModel"
  [(ngModel)]="secondInputValue"
></app-custom-input>
<div>
  First touched: {{firstInput.touched}}
  <br/>
  Second touched: {{secondInput.touched}}
</div>

说明 #

• 移除内部ngModel后，组件仅通过ControlValueAccessor与外部ngModel交互，避免了状态冲突。
• 使用blur事件触发onTouched()，符合Angular表单控件中touched状态的定义（用户与控件交互后离开），而非每次输入都标记为touched。
• 每个组件实例状态完全独立，输入第一个组件时仅它的touched变为true，第二个组件保持false。

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