Angular 电话号码输入掩码与扩展号支持操作步骤

本文详解如何在 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 <= 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 });}}

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

<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[ngClass]="{ 'is-invalid': (isSaved && contactForm.get('phone')?.errors)}"></div>

注意事项：

1. 不要混用 mask 属性：本指令已接管全部格式化逻辑，若同时使用 mask="(000)-000-0000 x 00000" 会导致冲突；
2. minlength/maxlength 设置需合理：建议 minlength="12"（123-456-7890 长度），maxlength="20" 足够覆盖带空格和分机的最长形式；
3. 验证器动态管理：setValidators(null) 清除验证器是关键，否则 Validators.required 等会与 pattern 冲突；
4. 正则优化说明：最终校验正则 /^(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，真正实现「所见即所验」的专业体验。