本文介绍如何在 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 属性）：
<div class="input-group">
<input
type="text"
placeholder="Phone (e.g., 123-456-7890 x 123)"
class="form-control"
formControlName="phone"
minlength="12"
maxlength="20"
appPhoneExtMask
[ngClass]="{ 'is-invalid': isSaved && contactForm.get('phone')?.errors }">
</div>✅ 关键设计说明：
-
输入即格式化：监听
input事件，每次按键后自动清理、重组、写回，用户无需手动输入符号； -
分机号柔性支持：
x后允许 1–5 位数字，空格与x为固定分隔符，符合常见业务规范； -
验证与 UI 解耦：仅当输入不匹配格式时才激活
pattern验证器，避免初始空值或编辑中途误报； -
兼容 Reactive Forms：通过
NgControl直接操作FormControl，与formControlName完全协同； -
性能优化：
emitEvent: false防止 setValue 触发重复 input 循环，updateValueAndValidity精准刷新状态。
⚠️ 注意事项：
- 不要同时使用第三方
mask指令（如ngx-mask），否则会与本指令冲突； -
minlength="12"是为保证最少输入123-456-7890（12 字符），若需支持更宽松的初始输入，可设为10并在验证逻辑中放宽； - 若需支持国际区号（如
+1 (123)...），需扩展正则与格式化逻辑，建议单独封装为InternationalPhoneMaskDirective； - 在
AppModule中务必声明该指令：declarations: [..., PhoneExtentionMaskDirective]。
通过该指令，你获得了一个可复用、易维护、符合 WCAG 可访问性标准的电话输入解决方案——格式即体验，验证即保障。
