Комбинированные валидаторы Regex с оператором Or в Angular Typescript

Question

Как добавить дополнительные валидаторы Regex в качестве комбинированного варианта? Например, создается следующее регулярное выражение, позволяющее клиенту вводить номер телефона с дефисами

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]],

Answer 1

Вы можете создать собственный валидатор с помощью обоих регулярных выражений. Теперь разрешены оба типа телефонных номеров.

Демо

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}$/);