Чтобы отформатировать номер телефона в Angular

Question

Я пытаюсь создать директиву, которая форматирует телефонный номер от 1234567890 до (123) 456-7890. Код директивы приведен ниже:

import { Directive, HostListener } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[formControlName][appPhoneMask]',
})
export class PhoneMaskDirective {

  constructor(public ngControl: NgControl) { }

  @HostListener('ngModelChange', ['$event'])
  onModelChange(event) {
    this.onInputChange(event, false);
  }

  @HostListener('keydown.backspace', ['$event'])
  keydownBackspace(event) {
    this.onInputChange(event.target.value, true);
  }


  onInputChange(event, backspace) {
    let newVal = event.replace(/\D/g, '');
    if (backspace && newVal.length <= 6) {
      newVal = newVal.substring(0, newVal.length - 1);
    }
    if (newVal.length === 0) {
      newVal = '';
    } else if (newVal.length <= 3) {
      newVal = newVal.replace(/^(\d{0,3})/, '($1)');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})/, '($1) $2');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,3})(\d{0,3})(\d{0,4})/, '($1) $2-$3');
    }
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

Проблема, с которой я сталкиваюсь, используя эту директиву, заключается в том, что при вводе первого числа она помещает число в скобки, но при вводе второго числа под ошибкой я получаю Невозможно прочитать свойство ' replace 'of null в PhoneMaskDirective.onInputChange

Пожалуйста, предложите какое-нибудь решение или альтернативу этому подходу.

Answer 1

Mani sh, проверьте приведенный ниже фрагмент кода, просто передайте строку в метод "phoneFormat", чтобы получить желаемый результат.

function phoneFormat (value) {
                var numbers = value && value.replace(/-/g,"");
                var matches = numbers && numbers.match(/^(\d{3})(\d{3})(\d{4})$/);
                
                if (matches) {
                    return '('+matches[1] + ") " + matches[2] + "-" + matches[3];
                }

                return undefined;
            }
const phoneNumber = phoneFormat("1234567890");            
console.log(phoneNumber);