Angular 7响应式表单绑定拦截：实现实时数据格式化与单次变更事件

嘿，我完全懂你现在的困扰——用指令处理表单值格式化时，两次触发变更事件确实会打乱逻辑，比如重复执行校验或业务代码。咱们换个思路，不用单纯依赖HostListener去事后修正值，而是直接接管表单和视图之间的值流转桥梁，这样就能实现真正的拦截，保证只触发一次格式化后的变更事件。

问题根源 #

你当前的实现是在blur事件触发后，先拿到原始值格式化，再手动修改FormControl和输入框的值。但这里的问题是：用户输入后，Angular的原生表单绑定已经把原始值同步到了FormControl，触发了第一次变更事件；之后你再修改FormControl，哪怕用emitEvent: false，之前的原始值事件已经发出去了，所以才会出现两次触发的情况。

解决方案：用ControlValueAccessor接管值流转 #

Angular的ControlValueAccessor是表单控件和视图之间的标准接口，我们可以让指令实现这个接口，彻底接管值从视图到表单、表单到视图的传递过程，这样就能在值到达FormControl之前就完成格式化，从根源上避免两次事件。

完整指令实现 #

import { Directive, ElementRef, HostListener, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[appFormatValue]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => FormatValueDirective),
      multi: true
    }
  ]
})
export class FormatValueDirective implements ControlValueAccessor {
  // 保存表单控件的变更回调
  private onChangeCallback: (value: any) => void = () => {};
  // 保存表单控件的触摸回调
  private onTouchedCallback: () => void = () => {};

  constructor(private el: ElementRef) {}

  // 从表单控件向视图赋值时触发，确保视图显示格式化后的值
  writeValue(value: any): void {
    this.el.nativeElement.value = this.transformValue(value);
  }

  // 注册表单控件的变更回调（视图值变化时通知表单）
  registerOnChange(fn: (value: any) => void): void {
    this.onChangeCallback = fn;
  }

  // 注册表单控件的触摸回调
  registerOnTouched(fn: () => void): void {
    this.onTouchedCallback = fn;
  }

  // 可选：实时处理输入（如果不需要实时格式化，可注释掉这个监听）
  @HostListener('input', ['$event.target.value'])
  onInput(value: string): void {
    this.processValue(value);
  }

  // 处理blur事件，确保最终值是格式化后的
  @HostListener('blur')
  onBlur(): void {
    this.processValue(this.el.nativeElement.value);
    this.onTouchedCallback();
  }

  // 核心：格式化值并通知表单
  private processValue(rawValue: any): void {
    const formattedValue = this.transformValue(rawValue);
    // 更新视图显示
    this.el.nativeElement.value = formattedValue;
    // 只通知表单一次格式化后的值
    this.onChangeCallback(formattedValue);
  }

  // 你的自定义格式化逻辑（比如把小于0的值设为0）
  private transformValue(value: any): any {
    const num = Number(value);
    // 非数字转0，负数转0
    return isNaN(num) ? 0 : Math.max(num, 0);
  }
}

代码说明 #

1. 接管值流转：通过NG_VALUE_ACCESSOR提供者，告诉Angular用这个指令来处理表单控件和视图之间的值传递，替代原生逻辑。
2. 拦截原始值：在processValue方法里，先对用户输入的原始值做格式化，再把格式化后的值同步给视图和表单控件——这样表单控件永远只会收到格式化后的正确值，不会触发原始值的变更事件。
3. 统一处理逻辑：不管是实时输入还是blur事件，都通过processValue统一处理，避免重复代码，保证逻辑一致性。

使用方式 #

在你的响应式表单输入框上添加指令即可：

<input type="number" formControlName="amount" appFormatValue>

现在你监听FormControl的valueChanges时，只会收到格式化后的正确值，再也不会出现两次事件触发的问题了。

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