在角度反应形式验证器中使用 google-libphonenumber [英] Use google-libphonenumber in angular reactive forms validator

问题描述

这是使用此库的基本用例.我需要验证号码是否有效.我使用 angular 反应式表单 自定义验证器.
验证器在文件中:validators/phone-number.validator.ts
第一步是获取google-libphonenumber PhoneNumberUtil 实例

This is a basic use case for using this library. I need to verify the number if it is valid. I use angular reactive forms custom validators.
Validator is in file: validators/phone-number.validator.ts
First step is to get google-libphonenumber PhoneNumberUtil instance

我的代码的当前状态是:

Current state of my code is:

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):

Usage in reactive form (file contact.component.ts):

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

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

This code can be build and executed, however, after launch I get:

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 项目.

Declaration
This question is similar to How to use Google libphonenumber in Typescript? but in this case it is specifically about the Angular project.

推荐答案

我目前找到了一个解决方案:

1. 您需要 google-libphonenumber 并输入它:
   npm install --save google-libphonenumber
npm install --save-dev @types/google-libphonenumber

将 PhoneNumberUtil, PhoneNumber 导入您的 validator 文件(完整内容):

Import PhoneNumberUtil, PhoneNumber into your validator file (full content):

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 } };
  }
}

1. 在反应形式中使用 PhoneNumberValidator 和您的默认区域代码(代码的一部分):

1. Use PhoneNumberValidator in reactive form with your default region code (part of code):

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

这篇关于在角度反应形式验证器中使用 google-libphonenumber的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！