本文介绍如何在 Angular 中通过自定义指令实现带可选分机号的电话号码格式化与实时校验，支持 (123)-456-7890 X 12345 标准格式，兼顾用户体验与表单验证一致性。
本文介绍如何在 angular 中通过自定义指令实现带可选分机号的电话号码格式化与实时校验，支持 `(123)-456-7890 x 12345` 标准格式，兼顾用户体验与表单验证一致性。
在 Angular 表单中，仅依赖 mask 属性（如 ngx-mask）难以灵活处理“扩展号可选”这一业务场景——既要保证输入时自动格式化为 (123)-456-7890 X 12345，又要确保表单控件值纯净（如提交时为 1234567890 或 123456789012345），同时满足动态校验逻辑。为此，推荐采用自定义指令 + 实时格式化 + 条件验证的组合方案。
以下是一个生产就绪的 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 {
// 提取纯数字（移除非数字字符）
let numericValue = value.replace(/D/g, '');
// 分阶段格式化：主号码 10 位 + 可选扩展号（1–5 位）
if (numericValue.length <= 10) {
// 主号码阶段：(123) 456 7890 → 123-456-7890
numericValue = numericValue.replace(/(d{3})(d{0,3})(d{0,4})/, (_, g1, g2, g3) => {
return `${g1}${g2 ? '-' + g2 : ''}${g3 ? '-' + g3 : ''}`;
});
} else {
// 含扩展号：截取前 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}`;
}
// 同步更新 FormControl 值（注意：保留格式化后的显示值，便于用户阅读）
this.ngControl.control.setValue(numericValue, { emitEvent: false });
// 动态校验：仅当输入符合标准格式时清除验证器，否则启用 pattern 校验
this.adjustValidation(numericValue);
}
private adjustValidation(value: string): void {
// 支持两种合法状态：
// ✅ "123-456-7890"（无分机）
// ✅ "123-456-7890 x 123"（带 1–5 位分机，x 大小写不敏感，空格可选）
const regex = /^(d{3}-d{3}-d{4})(?:s*[xX]s*d{1,5})?$/;
const isValid = regex.test(value);
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 123)"
class="form-control"
formControlName="phone"
minlength="12"
maxlength="20"
appPhoneExtMask
[ngClass]="{ 'is-invalid': isSaved && contactForm.get('phone')?.errors }">
</div>⚠️ 关键注意事项：
-
不要混用第三方 mask 库：本指令已内置格式化逻辑，若同时使用
mask="(000)-000-0000 x 00000"会导致冲突与光标跳变； -
表单提交前建议清洗值：
FormControl.value为格式化字符串（如"123-456-7890 x 123"），后端通常需要纯数字。可在提交时统一提取：const rawPhone = form.get('phone')?.value.replace(/[^0-9]/g, ''); // → "1234567890123" -
正则优化说明：原问题中
this.commonRegex.PhoneWithExtRegex的/\(?([0-9]{3})\)?([ .-]?)([0-9]{3})\2([0-9]{4})+\x([0-4]{5})/存在语法错误（+位置不当、[0-4]应为[0-9]）且未覆盖空格/大小写灵活性，已修正为更健壮的^(d{3}-d{3}-d{4})(?:s*[xX]s*d{1,5})?$； -
无障碍友好：指令监听
input而非keypress，兼容粘贴、语音输入等场景。
该方案兼顾开发效率与用户体验，在保持 Angular 表单响应式特性的同时，实现了专业级电话字段交互规范。
