Angular手机号验证器（指令掩码）：实现分机号可选格式

要让分机号成为可选项，需要同时调整正则验证规则和输入掩码配置，具体修改如下：

1. 修正TypeScript中的正则表达式 #

原正则强制要求分机号，且分机号的数字范围错误（[0-4]{5}限制了只能输入0-4的数字，不符合实际需求）。修改后将分机号部分设为可选，并修正数字范围：

// 替换原PhoneWithExtRegex的正则表达式
PhoneWithExtRegex: RegExp = /^\(\d{3}\)-\d{3}-\d{4}(?:\s*X\s*\d{5})?$/i;

// 表单验证配置保持不变
phone: ['', [Validators.pattern(this.commonRegex.PhoneWithExtRegex)]],

正则说明：

• ^\(\d{3}\)-\d{3}-\d{4}：匹配必填的手机号部分，格式固定为(123)-456-7890
• (?:\s*X\s*\d{5})?：非捕获组，?表示整个分机号片段可选；\s*允许X前后有任意空格，\d{5}匹配5位分机号
• i修饰符：忽略大小写，支持输入x或X

2. 调整HTML中的输入掩码 #

原掩码强制显示分机号部分，需修改为可选片段（Angular ngx-mask中用[]包裹可选内容）：

<input type="text" placeholder="Phone" minlength="14" maxlength="21" class="form-control" formControlName="phone"
       mask="(000)-000-0000 [X 00000]"
       [ngClass]="{ 'is-invalid': (isSaved && contactForm.phone.errors)}">

掩码说明：

• (000)-000-0000：固定的手机号格式部分
• [X 00000]：用[]标记为可选片段，用户可以选择不输入分机号
• 同时调整minlength和maxlength：无分机号时长度为14（(123)-456-7890），带分机号时长度为21（加上 X 12345的7位字符）

内容的提问来源于stack exchange，提问作者Kuldip Baldaniya