如何结合国家码验证手机号及解决Angular自定义校验器类型报错

一、类型报错修复 #

该报错是TypeScript严格校验模式下，自定义校验器返回类型未匹配Angular官方ValidationErrors类型导致的，按以下步骤修改即可：

1. 首先从@angular/forms导入必要类型：

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

2. 给校验结果增加类型断言即可解决报错，原报错行修改为：

return validNumber ? null : { 'wrongNumber': { value: control.value } } as ValidationErrors;

二、国家码+手机号联合校验实现 #

要将国家码传入校验器，需要用校验器工厂函数封装校验逻辑，结合国家码变化监听实现动态校验：

1. 封装校验器工厂 #

import * as libphonenumber from 'google-libphonenumber';

// 接收国家码作为入参，返回适配对应地区规则的校验器
export function phoneValidator(countryCode: string): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    // 空值逻辑交给required校验器处理
    if (!control.value) return null;

    const phoneUtil = libphonenumber.PhoneNumberUtil.getInstance();
    try {
      const parsedNumber = phoneUtil.parse(control.value, countryCode.toUpperCase());
      const isValid = phoneUtil.isValidNumber(parsedNumber);
      return isValid ? null : { wrongNumber: { value: control.value } };
    } catch (err) {
      // 解析失败直接判定为格式错误
      return { wrongNumber: { value: control.value } };
    }
  }
}

2. 表单逻辑配置 #

监听国家码选择项的变化，动态更新手机号控件的校验规则：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

export class PhoneFormComponent implements OnInit {
  public userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      countryCode: ['US'], // 国家码默认值
      phone: ['', [Validators.required]]
    });
  }

  ngOnInit(): void {
    const phoneControl = this.userForm.get('phone');
    const countryControl = this.userForm.get('countryCode');

    // 初始化校验规则
    phoneControl.addValidators(phoneValidator(countryControl.value));

    // 监听国家码变化，动态更新校验规则
    countryControl.valueChanges.subscribe(newCode => {
      // 移除旧校验器，添加新校验器
      phoneControl.clearValidators();
      phoneControl.setValidators([
        Validators.required,
        phoneValidator(newCode)
      ]);
      // 触发即时校验更新
      phoneControl.updateValueAndValidity();
    });
  }
}

三、HTML错误提示实现 #

通过表单控件的errors属性判断校验状态，展示对应提示：

<form [formGroup]="userForm">
  <!-- 国家码选择 -->
  <select formControlName="countryCode">
    <option value="US">美国 (+1)</option>
    <option value="CA">加拿大 (+1)</option>
    <option value="CN">中国 (+86)</option>
  </select>

  <!-- 手机号输入 -->
  <input type="tel" formControlName="phone" placeholder="请输入手机号">

  <!-- 错误提示区域 -->
  <div class="error-tip" *ngIf="userForm.get('phone').invalid && (userForm.get('phone').dirty || userForm.get('phone').touched)">
    <span *ngIf="userForm.get('phone').errors?.['required']">请输入手机号</span>
    <span *ngIf="userForm.get('phone').errors?.['wrongNumber']">请输入符合当前所选地区规则的有效手机号</span>
  </div>
</form>

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