本文将详细介绍如何在 Angular 项目中，通过自定义指令实现支持可选分机号的电话号码格式化与校验。该方案可兼容 (123)-456-7890 X 12345 这类常见电话格式，同时兼顾输入体验、数据规范化以及表单验证的一致性。
本文将详细介绍如何在 Angular 中使用自定义指令完成带可选分机号的电话号码输入格式化与校验，支持 (123)-456-7890 X 12345 这类标准电话格式，能够同时提升用户输入体验与 Angular 表单校验的统一性。
如果放到 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 <= 10) {
// 主号码阶段：(123) 456 7890 → 123-456-7890（简化显示，便于后续扩展）
numericValue = numericValue.replace(/(d{3})(d{1,3})?(d{1,4})?/, (match, g1, g2, g3) => {
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 });
}
}? 模板使用方式（无需第三方库）
⚠️ 注意事项：
- 不要混用
mask属性：该指令已经完整接管电话号码输入格式化逻辑，如果再同时使用mask="(000)-000-0000 x 00000"，很容易出现格式冲突或输入异常； minlength/maxlength设置要合理：通常建议minlength="12"（对应123-456-7890的长度），而maxlength="20"足以覆盖带空格与分机号的完整电话格式；- 验证器需要动态管理：使用
setValidators(null)清理验证器非常关键，否则Validators.required等其他 Angular 表单校验规则可能会与 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，由指令动态控制
});有了这条 Angular 自定义指令后，当用户输入 1234567890123 时，系统会自动将其格式化为 123-456-7890 x 123；如果输入的是 1234567890，页面则会直接显示为 123-456-7890。而对于夹杂字母、分机位数超长等不合规的电话号码输入，也会在输入过程中被即时拦截，并统一标记为 invalid，真正实现“看到什么，就校验什么”的表单交互效果。
