Angular表单手机号验证问题：空格触发错误及数字长度校验需求

核心问题拆解 #

当前的问题根源：

• 原生minlength/maxlength校验的是格式化后的值长度（包含-、空格等分隔符），不是你需要的纯数字长度
• 输入空格时，虽然指令用/\D/g过滤了非数字，但原生验证仍会把空格算入长度触发错误
• 指令里直接调用setValidators会覆盖表单原有配置的验证规则，导致逻辑冲突

解决方案步骤 #

1. 编写自定义数字长度验证器

创建专门针对纯数字长度的验证器，替代原生长度校验：

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

export function phoneNumberLengthValidator(min: number, max: number): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (!control.value) return null; // 空值不触发验证（需必填请单独加Validators.required）
    const pureDigits = control.value.replace(/\D/g, '');
    if (pureDigits.length < min) {
      return { 'minDigitLength': { requiredMin: min, actual: pureDigits.length } };
    }
    if (pureDigits.length > max) {
      return { 'maxDigitLength': { requiredMax: max, actual: pureDigits.length } };
    }
    return null;
  };
}

2. 修改手机号掩码指令

调整指令逻辑，确保：

• 彻底过滤所有非数字字符（包括空格）
• 不覆盖原有验证器，而是合并自定义规则
• 更新值时同步触发验证状态

修改后的指令代码：

import { Directive, HostListener } from '@angular/core';
import { NgControl, Validators } from '@angular/forms';
import { phoneNumberLengthValidator } from './phone-validators'; // 导入自定义验证器

@Directive({
  selector: '[formControlName][appPhoneExtMask]',
})
export class PhoneExtentionMaskDirective {
  constructor(public ngControl: NgControl) {
    // 初始化时添加自定义验证器
    this.mergeValidators();
  }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.formatValue(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.formatValue(this.ngControl.control.value, true);
  }

  ngOnInit() {
    this.formatValue(this.ngControl.control.value, false);
  }

  private mergeValidators() {
    const existingValidators = this.ngControl.control.validator;
    this.ngControl.control.setValidators([
      ...(existingValidators ? [existingValidators] : []),
      phoneNumberLengthValidator(10, 20), // 纯数字最小10位、最大20位
      Validators.pattern(/^(1\s?)?(\d{3}|\(\d{3}\))[\s\-]?\d{3}[\s\-]?\d{4}( ?x([0-9]{3,}))?$/)
    ]);
    this.ngControl.control.updateValueAndValidity();
  }

  formatValue(event, backspace) {
    if (event === null || event === '') {
      this.ngControl.control.setValue('');
      return;
    }
    // 先过滤所有非数字字符（含空格）
    let pureDigits = event.replace(/\D/g, '');
    
    // 处理退格逻辑
    if (backspace) {
      pureDigits = pureDigits.substring(0, pureDigits.length - 1);
    }

    // 生成格式化显示值
    let formattedVal = '';
    if (pureDigits.length === 0) {
      formattedVal = '';
    } else if (pureDigits.length <= 3) {
      formattedVal = pureDigits;
    } else if (pureDigits.length <= 6) {
      formattedVal = `${pureDigits.slice(0,3)}-${pureDigits.slice(3)}`;
    } else if (pureDigits.length <= 10) {
      formattedVal = `${pureDigits.slice(0,3)}-${pureDigits.slice(3,6)}-${pureDigits.slice(6)}`;
    } else if (pureDigits.length <= 20) {
      formattedVal = `${pureDigits.slice(0,3)}-${pureDigits.slice(3,6)}-${pureDigits.slice(6,10)} x ${pureDigits.slice(10)}`;
    } else {
      // 超过20位数字截断
      pureDigits = pureDigits.slice(0,20);
      formattedVal = `${pureDigits.slice(0,3)}-${pureDigits.slice(3,6)}-${pureDigits.slice(6,10)} x ${pureDigits.slice(10)}`;
    }

    // 更新显示值与模型值
    this.ngControl.valueAccessor.writeValue(formattedVal);
    this.ngControl.control.setValue(formattedVal, { emitEvent: false });
    // 手动触发验证更新
    this.ngControl.control.updateValueAndValidity({ emitEvent: false });
  }
}

3. 更新输入框HTML

移除原生minlength和maxlength，改用自定义验证器处理：

<input type="text" 
       placeholder="Phone" 
       class="form-control" 
       formControlName="phone" 
       appPhoneExtMask 
       [ngClass]="{ 'is-invalid': (isSaved && contactForm.get('phone').errors)}">

4. 模板中添加错误提示（可选）

如果需要给用户显示具体错误信息：

<div *ngIf="contactForm.get('phone').errors?.minDigitLength" class="invalid-feedback">
  手机号至少需要{{ contactForm.get('phone').errors.minDigitLength.requiredMin }}位数字
</div>
<div *ngIf="contactForm.get('phone').errors?.maxDigitLength" class="invalid-feedback">
  手机号最多只能有{{ contactForm.get('phone').errors.maxDigitLength.requiredMax }}位数字
</div>
<div *ngIf="contactForm.get('phone').errors?.pattern" class="invalid-feedback">
  请输入有效的手机号格式
</div>

关键说明 #

• 自定义验证器phoneNumberLengthValidator会提取输入值中的纯数字校验长度，完全忽略空格和分隔符
• 指令采用合并验证器的方式，避免覆盖表单原有规则
• 格式化逻辑仅负责生成友好显示格式，验证完全基于纯数字长度，彻底解决空格触发错误的问题

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