本文详解如何在 Angular 中通过自定义指令实现带可选分机号的电话号码格式化与校验，支持 (123)-456-7890 X 12345 标准格式，兼顾用户体验与表单验证一致性。

本文详解如何在 angular 中通过自定义指令实现带可选分机号的电话号码格式化与校验，支持 `(123)-456-7890 x 12345` 标准格式，兼顾用户体验与表单验证一致性。

在 Angular 表单中，仅依赖 mask 属性（如 ngx-mask 库）往往难以灵活处理“主号码必填 + 分机号可选”的复合校验逻辑，且原生 mask 无法动态响应输入、修正非法字符或同步更新验证状态。为此，推荐采用 自定义指令（Directive） 方式，从底层控制输入行为、格式化逻辑与验证规则。

✅ 核心实现：appPhoneExtMask 自定义指令

该指令监听 input 事件，实时清洗、格式化并校验用户输入：

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

@Directive({
  selector: '[appPhoneExtMask]'
})
export class PhoneExtentionMaskDirective {
  constructor(public ngControl: NgControl) {}

  @HostListener('input', ['$event.target.value'])
  onInput(value: string): void {
    // 步骤1：提取纯数字（移除非数字字符）
    let numericValue = value.replace(/\D/g, '');

    // 步骤2：按长度智能格式化
    if (numericValue.length  {
        return `${g1}${g2 ? '-' + g2 : ''}${g3 ? '-' + g3 : ''}`;
      });
    } else {
      // 主号码+分机号阶段：截取前10位为主号，后0–5位为分机号
      const main = numericValue.substring(0, 10);
      const ext = numericValue.substring(10, 15); // 最多5位分机
      numericValue = `${main.substring(0, 3)}-${main.substring(3, 6)}-${main.substring(6, 10)} x ${ext}`;
    }

    // 步骤3：写回表单控件（触发视图更新）
    this.ngControl.control.setValue(numericValue, { emitEvent: false });

    // 步骤4：动态校验（关键！避免残留无效状态）
    this.adjustValidation(numericValue);
  }

  private adjustValidation(value: string): void {
    // 支持格式：`123-456-7890` 或 `123-456-7890 x 12345`（x 后最多5位数字）
    const regex = /^(\d{3}-\d{3}-\d{4})( x \d{1,5})?$/;
    const isValid = regex.test(value);

    // 仅当值不合法时才设置 pattern validator；合法则清除验证器，避免干扰其他校验（如 required）
    if (isValid) {
      this.ngControl.control.setValidators(null);
    } else {
      this.ngControl.control.setValidators(Validators.pattern(regex));
    }
    this.ngControl.control.updateValueAndValidity({ onlySelf: true });
  }
}

? 模板使用方式（无需第三方库）

<div class="input-group">
  <input type="text" placeholder="Phone (e.g. 123-456-7890 x 12345)" class="form-control" formcontrolname="phone" minlength="12" maxlength="20" appphoneextmask contactform.get>
</div>

⚠️ 注意事项：

• 不要混用 mask 属性：本指令已接管全部格式化逻辑，若同时使用 mask="(000)-000-0000 x 00000" 会导致冲突；
• minlength/maxlength 设置需合理：建议 minlength="12"（123-456-7890 长度），maxlength="20" 足够覆盖带空格和分机的最长形式；
• 验证器动态管理：setValidators(null) 清除验证器是关键，否则 Validators.required 等会与 pattern 冲突；
• 正则优化说明：最终校验正则 /^(\d{3}-\d{3}-\d{4})( x \d{1,5})?$/ 更精准——它要求主号严格为 XXX-XXX-XXXX，分机部分 x 后必须有 1–5 位数字（而非 0–5，避免空 x 误判为有效）。

✅ 补充：表单构建建议（TypeScript）

// 在组件中初始化表单时，仅保留基础校验
this.contactForm = this.fb.group({
  phone: ['', [Validators.required]] // ✅ 不再传入 pattern，由指令动态控制
});

通过该指令，用户输入 1234567890123 将自动转为 123-456-7890 x 123；输入 1234567890 则显示 123-456-7890；任意非法输入（如字母、过长分机）均被拦截并标记为 invalid，真正实现「所见即所验」的专业体验。