时间戳

首页 > 解决方案 > 在 Angular Typescript 中将正则表达式验证器与 Or 运算符结合使用

angular - 在 Angular Typescript 中将正则表达式验证器与 Or 运算符结合使用

问题描述

如何添加更多正则表达式验证器作为或组合选项？例如，创建以下正则表达式，允许客户输入带连字符的电话号码

export const PhoneNumberValidator = Validators.pattern(/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/);

555-555-5555（带连字符）

现在业务部门允许客户输入不带任何连字符的电话号码，因此他们可以使用连字符或不使用连字符。这需要添加。如何使用存储的验证器和反应式表单构建器来完成？

(/^[0][1-9]\d{9}$|^[1-9]\d{9}$/)

-

this.customerForm = this.formBuilder.group({
  'phoneNumber': [null, [Validators.maxLength(50), PhoneNumberValidator]],

标签： angulartypescriptangular-reactive-formsangular8

解决方案

您可以使用这两个正则表达式创建自定义验证器。现在两种类型的电话号码都将被允许。

演示

export const PhoneNumberValidator = (control: AbstractControl): { [key: string]: any } | null => {

  if (!/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$/.test(control.value)
      &&
      !/^[0][1-9]\d{9}$|^[1-9]\d{9}$/.test(control.value)) {
    return { 'NOT_VALID': 'Not valid phone number' };
  }
}

或|在两个正则表达式之间使用

export const PhoneNumberValidator = Validators.pattern(/^(\([0-9]{3}\)|[0-9]{3}-)[0-9]{3}-[0-9]{4}$|^[0][1-9]\d{9}$|^[1-9]\d{9}$/);

推荐阅读