Angular 17自定义电话格式化指令粘贴时验证器失效问题

核心问题在于：自定义指令直接修改了<input>的value属性，但Angular响应式表单的FormControl并未同步这个变更，导致验证器仍基于旧值判断，直到手动输入触发表单的变更检测机制。

需要在指令中获取对应的FormControl，将格式化后的值同步到控件中，让表单验证器感知到值的变化。具体实现如下：

1. 注入NgControl关联表单控件 #

在指令中注入NgControl，直接操作对应的FormControl，而非仅修改DOM元素的value。

2. 同步格式化值到FormControl #

完成格式化后，通过NgControl.control.setValue()更新表单控件值，同时设置emitEvent: false避免循环触发input事件。

修改后的指令代码 #

import { Directive, HostListener, Inject } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[phoneFormatterDirective]'
})
export class PhoneFormatterDirective {

  constructor(@Inject(NgControl) private ngControl: NgControl) {}

  @HostListener('input', ['$event'])
  onInput(event: KeyboardEvent) {
    event.preventDefault();
    const input = event.target as HTMLInputElement;
    
    // 清理输入内容，仅保留数字
    let trimmed = input.value.replace(/[^0-9]/g, '');
    
    // 限制美国手机号最大长度为10位数字
    if (trimmed.length > 10) {
      trimmed = trimmed.substr(0, 10);
    }

    // 构建格式化后的号码
    let formatted = '';
    if (trimmed.length >= 3) {
      formatted += trimmed.substr(0, 3);
      if (trimmed.length >= 6) {
        formatted += '-' + trimmed.substr(3, 3);
        if (trimmed.length >= 10) {
          formatted += '-' + trimmed.substr(6, 4);
        }
      }
    } else {
      formatted = trimmed;
    }

    // 同步值到FormControl，禁止触发事件避免循环
    if (this.ngControl.control) {
      this.ngControl.control.setValue(formatted, { emitEvent: false });
    }
    input.value = formatted;
  }
}

额外优化说明 #

• 简化非数字字符清理逻辑，用replace(/[^0-9]/g, '')一次性移除所有非数字内容，更简洁高效。
• 调整长度限制为10位（美国标准手机号长度），避免多余数字干扰格式化结果。
• 使用emitEvent: false防止更新控件值时再次触发input事件，避免循环执行逻辑。

修改后，用户粘贴内容时，指令会先完成格式化，再同步到FormControl，表单验证器会基于最新的格式化值校验，即可正确识别有效格式。

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