ControlValueAccessor与FormControl值不同步：输入框加mask后值不一致问题

• 你当前实现的掩码指令仅修改了输入框的视图层展示内容，没有同步更新Angular FormControl的绑定值，非法输入没有被拦截在表单更新链路之外，才会出现输入框不显示、但formControl.value里残留非法字符的问题
• 现有逻辑只监听input事件修改了DOM元素的value属性，没有调用Angular表单的内置API更新控制值，FormControl仍然会按照默认逻辑捕获原始输入内容存入值中。

你需要在掩码指令中注入NgControl实例，完成输入内容的过滤格式化后，主动同步FormControl的值，具体修改如下：

1. 在指令构造函数中注入依赖：

import { NgControl } from '@angular/forms';

constructor(
  private elementRef: ElementRef<HTMLInputElement>,
  private ngControl: NgControl
) {}

2. 改写input事件处理逻辑，过滤非法字符后同步更新视图和表单值：

onInput(event: InputEvent) {
  // 你原有掩码处理逻辑：过滤非法字符、格式化内容
  const rawValue = this.elementRef.nativeElement.value;
  const validFormattedValue = yourMaskProcessLogic(rawValue);

  // 更新视图层显示
  this.elementRef.nativeElement.value = validFormattedValue;
  // 同步更新FormControl的值，emitEvent设为false避免重复触发valueChanges事件
  this.ngControl.control.setValue(validFormattedValue, { emitEvent: false });

  // 可选：如果存在非法输入，直接阻止默认事件，从根源避免原始输入进入表单逻辑
  if (rawValue !== validFormattedValue) {
    event.preventDefault();
  }
}

修改完成后再测试：输入字母等非法字符时，formControl.value和输入框显示内容会保持一致，不会残留未显示的非法内容。

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