本文将详细介绍如何在 Angular 中借助自定义指令，实现带可选分机号的电话号码格式化与校验。该方案支持 (123)-456-7890 x 12345 这类标准电话格式，能够同时兼顾输入体验、表单验证一致性以及实际业务场景的可用性。
本文将讲解如何在 Angular 中通过自定义指令完成带可选分机号的电话号码输入格式化与验证，支持 (123)-456-7890 x 12345 这种常见标准格式，让前端表单在易用性与校验准确性之间取得更好的平衡。
在 Angular 表单开发过程中，如果仅依赖 mask 属性或类似 ngx-mask 这样的输入掩码库，往往很难真正处理“动态格式化 + 表单校验同步”这一类复杂需求。尤其是在“主电话号码必填、分机号可选”的业务场景中，还要求格式必须严格匹配，例如 (123)-456-7890 x 12345，更推荐的做法是使用自定义指令统一接管输入、格式化和验证逻辑：一边输入一边自动整理格式，长度根据内容自适应，校验状态也能实时同步更新。
下面给出一个轻量级、无需第三方依赖的 PhoneExtentionMaskDirective 实现示例：
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) {
// 主号码阶段：10位 → "123-456-7890"
numericValue = numericValue.replace(/(d{3})(d{3})(d{4})/, '$1-$2-$3');
} else if (numericValue.length <= 15) {
// 主号+分机：截取前10位主号 + 后最多5位分机
const main = numericValue.substring(0, 10);
const ext = numericValue.substring(10, 15);
numericValue = `${main.substring(0, 3)}-${main.substring(3, 6)}-${main.substring(6, 10)} x ${ext}`;
} else {
// 超长截断：保留前10位主号 + 最多5位分机
numericValue = numericValue.substring(0, 15);
numericValue = numericValue.replace(/(d{3})(d{3})(d{4})(d{0,5})/, '$1-$2-$3 x $4');
}
// 3. 写回控件值（触发视图更新）
this.ngControl.control.setValue(numericValue, { emitEvent: false });
// 4. 动态调整验证规则
this.adjustValidation(numericValue);
}
private adjustValidation(value: string): void {
// 正则要求：必须为 "XXX-XXX-XXXX" 或 "XXX-XXX-XXXX x XXXXX"（分机0–5位）
const regex = /^(d{3}-d{3}-d{4})( x d{1,5})?$/;
const isValid = regex.test(value);
if (isValid) {
// 校验通过时清除验证器（避免干扰其他规则，如 required）
this.ngControl.control.setValidators(null);
} else {
// 校验失败时设置 pattern 验证器（确保提交前强制合规）
this.ngControl.control.setValidators(Validators.pattern(regex));
}
this.ngControl.control.updateValueAndValidity({ emitEvent: false });
}
}HTML 使用方式（无需 mask 属性）：
✅ 核心设计亮点：
- 输入过程中实时格式化：通过监听
input事件，在每次输入后自动提取数字、重组格式并写回控件值，用户无需手动输入连字符或分隔符； - 分机号支持更灵活：
x后允许输入 1–5 位数字，空格与x作为固定分隔形式，符合企业通讯录、CRM、后台管理系统等常见业务需求； - 验证逻辑与界面展示解耦：只有当输入内容不符合目标电话号码格式时，才启用
pattern验证器，从而减少初始空值或编辑过程中的误报提示； - 完美兼容 Reactive Forms：借助
NgControl直接操作FormControl，可与formControlName无缝配合，便于在 Angular 响应式表单中复用； - 表单性能更稳定：使用
emitEvent: false避免setValue触发重复输入循环，再结合updateValueAndValidity精准刷新校验状态，提升整体交互效率。
⚠️ 使用时的注意事项：
- 不要与第三方
mask指令同时使用（例如ngx-mask），否则很容易出现格式化逻辑冲突或校验异常； minlength="12"的设置是为了保证至少输入完整主号码123-456-7890（共 12 个字符），如果希望支持更宽松的初始录入，也可以改为10，并同步调整验证规则；- 如果项目还需要支持国际区号格式（例如
+1 (123)...），则需要进一步扩展正则表达式与格式化逻辑，建议单独封装为InternationalPhoneMaskDirective； - 在
AppModule中记得声明该指令：declarations: [..., PhoneExtentionMaskDirective]，否则 Angular 无法识别自定义指令。
通过这类 Angular 电话号码输入指令，你可以快速获得一个可复用、易维护、符合 WCAG 可访问性标准的电话输入与分机号校验方案，让电话号码格式化、输入体验和表单验证在同一套逻辑中稳定协同。
