Question

我正在使用ng2-validation，它使用libphonenumber-js来验证电话号码。我想在电话号码表单控件中同时允许美国和加拿大的电话号码。我目前正在通过CustomValidators.phone('US')作为表单控制验证器，该验证器允许使用美国电话号码，但不允许加拿大电话号码。

是否可以通过这种验证方法在表单控件中同时允许美国和加拿大的电话号码？

Answer 1

从您使用的验证器功能中查看the source code：

export const phone = (country: string): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: boolean } => {
    if (isPresent(Validators.required(control))) return null;

    let v: string = control.value;

    return isValidNumber({phone: v, country}) ? null : {phone: true};
  };
};

您应该可以将它们自己与or或（与此类似）相结合：

export const phone = (countries: string[]): ValidatorFn => {
  return (control: AbstractControl): { [key: string]: boolean } => {
    if (isPresent(Validators.required(control))) return null;

    let v: string = control.value;

    const validPhone: boolean = countries.map(c => isValidNumber({phone: v, c}).some(z => z);

    return validPhone ? null : {phone: true};
  };
};

然后在验证程序中，您可以传递国家代码列表：

phone('US', 'CAN')

Answer 2

我制作了一个新文件customPhoneValidator.ts，其中包含以下内容：

import { AbstractControl, ValidatorFn } from '@angular/forms';
import { isValidNumber, NationalNumber, CountryCode } from 'libphonenumber-js';

export const customPhoneValidator = (countries: CountryCode[]): ValidatorFn => {
    return (control: AbstractControl): { [key: string]: boolean } => {
        let v: NationalNumber = control.value;

        if (!v || v === '') return null;

        const validPhone: boolean = countries.map(c => isValidNumber(v, c)).some(z => z);

        return validPhone ? null : { phone: true };
    };
};

在使用验证器的组件中，我声明了const customPhoneCountries: CountryCode[] = ['US', 'CA'];并传递了customPhoneValidator(customPhoneCountries)作为表单控件的验证器。

ng2-validation结合了美国/加拿大电话验证？

2 个答案: