在角度反应形式验证器中使用 google-libphonenumber

Posted 2023-03-13

【中文标题】在角度反应形式验证器中使用 google-libphonenumber

【英文标题】：Use google-libphonenumber in angular reactive forms validator

【发布时间】：2018-09-06 20:58:45

【问题描述】：

这是使用此库的基本用例。我需要验证该号码是否有效。我使用角度 reactive forms custom validators. 验证器在文件中：validators/phone-number.validator.ts 第一步是获取 google-libphonenumber PhoneNumberUtil 实例

我的代码的当前状态是：

import  ValidatorFn, AbstractControl  from '@angular/forms';
import phoneUtil = require('google-libphonenumber');
const phoneUtilInstance = phoneUtil.PhoneNumberUtil.getInstance();

export function PhoneNumberValidator(): ValidatorFn 
  return (control: AbstractControl):  [key: string]: any  => 
    if (!phoneUtilInstance.isValidNumber(control.value)) 
      return  'wrongNumber':  value: control.value  ;
    
    return null;
  

以反应形式使用（文件contact.component.ts）：

import  PhoneNumberValidator  from '@app/validators';
...
ngOnInit(): void  ...
this.editPhoneForm = this.formBuilder.group(
  id: [''],
  phone: ['', [
    Validators.minLength(3),
    PhoneNumberValidator()
  ]],
); ...

此代码可以构建和执行，但是，启动后我得到：

ERROR TypeError: a.getCountryCodeOrDefault is not a function
at i18n.phonenumbers.PhoneNumberUtil.getRegionCodeForNumber (VM145038 libphonenumber.js:4418)

如何在 Angular 项目中正确使用这个库作为验证器？

声明 这个问题类似于How to use Google libphonenumber in Typescript?，但在这种情况下，它专门针对 Angular 项目。

【参考方案1】：

我目前找到了解决方案：

您需要 google-libphonenumber 并为其键入：npm install --save google-libphonenumbernpm install --save-dev @types/google-libphonenumber

将PhoneNumberUtil, PhoneNumber 导入您的validator 文件（完整内容）：

import  ValidatorFn, AbstractControl  from '@angular/forms';
import  PhoneNumberUtil, PhoneNumber  from 'google-libphonenumber';

const phoneNumberUtil = PhoneNumberUtil.getInstance();

export function PhoneNumberValidator(regionCode: string = undefined): ValidatorFn 
  return (control: AbstractControl):  [key: string]: any  => 
    let validNumber = false;
    try 
      const phoneNumber = phoneNumberUtil.parseAndKeepRawInput(
        control.value, regionCode
      );
      validNumber = phoneNumberUtil.isValidNumber(phoneNumber);
     catch (e)  

    return validNumber ? null :  'wrongNumber':  value: control.value  ;
  

以反应形式使用PhoneNumberValidator 与您的默认区域代码（代码的一部分）：

import  PhoneNumberValidator  from '@app/validators';
...
ngOnInit(): void  ...
this.editPhoneForm = this.formBuilder.group(
  id: [''],
  phone: ['', [
    PhoneNumberValidator('US')
  ]],
); ...

【讨论】：

你能在代码演示中演示一下吗--stackblitz

这个答案非常有效，除了它也有效地充当“必需”验证器（它不应该是 IMO） - 它应该首先测试 control.value 是否为空，如果它是空它应该返回 null（有效） - 如果还需要它，您可以将它与 Validators.required 验证器结合使用。

可以使用可选参数：PhoneNumberValidator(regionCode?: string):