Angular 18中Validators.pattern与type="number"兼容问题咨询

我在Angular 18应用中实现手机号（部分）输入的表单验证，规则为：仅允许数字、首位为1-9、至少6位数字。

当前代码如下：

组件代码 #

...
form = this.formBuilder.group({
  someSection: this.formBuilder.group({
    phone: ['', [Validators.required, Validators.pattern(/^[1-9]\d{5,}/)]],
...

模板代码 #

...
<input type="text" formControlName="phone" placeholder="Phone" />
...

遇到的问题：

• 使用type="text"时，正则验证有效，但用户可输入非数字字符
• 改为type="number"后，能阻止非数字输入，但正则验证失效，首位为0的6位以上数字也能通过验证

想请教：能否结合type="number"实现符合要求的验证？还是必须手动阻止非数字输入？

方案1：修复type="number"下的验证逻辑 #

当input类型为number时，表单控件的值是数字类型，默认的Validators.pattern会因数字自动去前导0的特性失效，此时可以用自定义验证器来精准校验：

自定义验证器

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function phoneNumberValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;
    if (!value) return null; // 空值由required验证处理
    
    const numStr = value.toString();
    // 严格匹配首位1-9、后续至少5位数字的格式
    const isValid = /^[1-9]\d{5,}$/.test(numStr);
    return isValid ? null : { invalidPhone: true };
  };
}

表单构建代码

form = this.formBuilder.group({
  someSection: this.formBuilder.group({
    phone: ['', [
      Validators.required,
      phoneNumberValidator() // 替换原有pattern验证器
    ]],
  })
});

模板代码

<input type="number" formControlName="phone" placeholder="Phone" />
<!-- 错误提示示例 -->
<div *ngIf="form.get('someSection.phone')?.hasError('invalidPhone')">
  请输入首位为1-9、至少6位的数字
</div>

方案2：保持type="text"，添加输入过滤 #

如果不想用type="number"，可以在文本输入框上添加输入过滤逻辑，阻止非数字字符输入，同时保留原正则验证：

模板代码（绑定输入事件）

<input 
  type="text" 
  formControlName="phone" 
  placeholder="Phone"
  (input)="filterNonNumeric($event)"
/>

组件中的过滤方法

filterNonNumeric(event: Event): void {
  const input = event.target as HTMLInputElement;
  // 移除所有非数字字符
  input.value = input.value.replace(/\D/g, '');
  // 同步更新表单控件的值
  this.form.get('someSection.phone')?.setValue(input.value);
}

为什么type="number"会导致正则失效？ #

当input为type="number"时，输入的0开头数字（如0123456）会被自动解析为数字123456（去掉前导0），此时Validators.pattern匹配的是解析后的数字字符串，自然会误判为符合规则。自定义验证器直接将原始输入的数字转成字符串校验，能避免这个问题。

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