在 angular 反应式表单验证器中使用 google-libphonenumber

Question

这是使用该库的基本用例。我需要验证号码是否有效。我用 angular 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 项目。

Answer 1

我目前找到解决方法：

您需要 google-libphonenumber 并为其键入：
npm install --save google-libphonenumber
npm 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')
  ]],
}); ...

在 angular 反应式表单验证器中使用 google-libphonenumber

Use google-libphonenumber in angular reactive forms validator

typescript

libphonenumber

angular-validation

angular

angular-reactive-forms