Angular自定义表单组件响应式表单下值变更无法双向同步问题

自定义表单控件响应式表单同步问题解决方案 #

根本原因 #

这个问题是自定义控件的ControlValueAccessor接口实现不完整导致的，不需要手动订阅formControl的值变更事件，补全接口逻辑即可解决。

具体差异说明 #

• ngModel场景下的双向绑定走模板输入输出事件流，修改单个控件会直接触发同值绑定的其他控件的输入属性更新，因此可以自动同步。
• 响应式表单场景下，formControl值更新时会主动调用所有绑定该控件的自定义表单组件的writeValue方法，传入最新值，你当前的自定义控件没有在writeValue中同步更新自身视图状态，因此出现不同步的问题。

修复方案 #

1. 在自定义组件中注入ChangeDetectorRef，处理可能存在的OnPush变更检测策略导致的视图不更新问题
2. 补全writeValue方法的逻辑，收到新值后同步更新内部状态并触发视图更新
   示例代码：

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

@Component({
  selector: 'app-custom-input',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  innerValue = '';
  onChange = (val: string) => {};
  onTouched = () => {};

  // 注入变更检测实例
  constructor(private cdr: ChangeDetectorRef) {}

  writeValue(value: string): void {
    // 同步最新值到内部变量
    this.innerValue = value ?? '';
    // 标记为需要变更检测，确保视图更新
    this.cdr.markForCheck();
  }

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

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

  // 内部值变更时触发的方法，绑定到控件内部的input事件上
  onValueChange(val: string): void {
    this.innerValue = val;
    this.onChange(val);
  }
}

注意事项 #

不要主动订阅formControl.valueChanges来同步值，Angular框架本身已经处理了多控件绑定同个formControl的通知逻辑，手动订阅反而会增加内存泄漏风险和冗余逻辑。

内容的提问来源于stack exchange，提问作者Demiro-FE-Architect