Angular 5：带ControlValueAccessor的响应式表单onChange未触发

问题诊断 #

你的问题核心在于没有完整实现ControlValueAccessor接口的必要方法，或者在组件内部值发生变化时，没有主动调用onChange回调函数来通知响应式表单更新状态。从你提供的代码片段来看，只声明了onChange变量，但缺少关键的方法实现和值变化时的回调触发逻辑。

完整解决方案 #

下面是修正后的组件代码，我会补充所有必要的ControlValueAccessor实现逻辑，确保onChange能正确触发：

组件类代码

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

@Component({
  selector: 'app-currency-input',
  templateUrl: './currency-input.component.html',
  styleUrls: ['./currency-input.component.scss'],
  providers: [
    CurrencyPipe,
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CurrencyInputComponent),
      multi: true
    }
  ]
})
export class CurrencyInputComponent implements ControlValueAccessor {
  @Input() class = '';
  // 用于显示带货币符号的输入值
  displayValue: string;
  // 用于存储原始数字值（同步给表单控件）
  private innerValue: number;

  // ControlValueAccessor 必要回调
  onChange: (value: number) => void = () => {};
  onTouched: () => void = () => {};

  constructor(private currencyPipe: CurrencyPipe) {}

  // 实现ControlValueAccessor：当表单控件设置值时，同步到组件内部
  writeValue(value: number): void {
    this.innerValue = value;
    // 转换为带货币符号的显示值
    this.displayValue = this.currencyPipe.transform(value, 'USD', 'symbol');
  }

  // 实现ControlValueAccessor：注册表单控件的change回调
  registerOnChange(fn: (value: number) => void): void {
    this.onChange = fn;
  }

  // 实现ControlValueAccessor：注册表单控件的touched回调
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // 处理输入框的输入事件，提取数字并通知表单
  onInputChange(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    // 去掉所有非数字字符（保留小数点）
    const rawValue = inputElement.value.replace(/[^0-9.]/g, '');
    const numericValue = rawValue ? parseFloat(rawValue) : null;

    // 更新内部值和显示值
    this.innerValue = numericValue;
    this.displayValue = this.currencyPipe.transform(numericValue, 'USD', 'symbol');

    // 关键：调用onChange通知表单控件更新值
    this.onChange(numericValue);
    // 标记控件为已触摸
    this.onTouched();
  }
}

组件模板（currency-input.component.html）

<input
  [class]="class"
  [value]="displayValue"
  (input)="onInputChange($event)"
  (blur)="onTouched()"
/>

关键说明 #

1. 完整实现ControlValueAccessor接口：必须实现writeValue、registerOnChange、registerOnTouched三个核心方法，这是组件与表单控件双向绑定的基础。
2. 分离显示值和内部值：用displayValue显示带货币符号的内容，用innerValue存储原始数字值，避免表单控件被非数字值污染。
3. 主动触发onChange：在onInputChange方法中，处理完输入值后必须调用this.onChange(numericValue)，这样响应式表单才能感知到值的变化。
4. 标记控件为已触摸：在输入框的blur事件中调用onTouched()，确保表单的触摸状态正常更新。

响应式表单中的使用示例 #

// 在父组件的表单初始化中
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({ /* ... */ })
export class ParentComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      price: [0] // 初始值
    });

    // 监听表单值变化，验证onChange是否触发
    this.myForm.get('price').valueChanges.subscribe(value => {
      console.log('表单值变化:', value);
    });
  }
}

父组件模板：

<form [formGroup]="myForm">
  <app-currency-input formControlName="price"></app-currency-input>
</form>

现在你可以测试一下，输入框中输入内容时，表单的valueChanges应该能正常打印出数字值，说明onChange已经正确触发了。

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