Форматирование ввода номера телефона в угловой - PullRequest
Новая
       41

Форматирование ввода номера телефона в угловой

0 голосов
/ 20 октября 2019

Я видел много решений для форматирования поля ввода телефонного номера в Angularjs, но я не могу найти ничего в Angular 7. Что я по сути хочу, чтобы пользователь набрал в текстовом поле следующее:

123456789

и для текстового поля отформатировать ввод как:

(123) 456-789

как я могу пойтиделать это? Для проверки я нашел следующее регулярное выражение: 

^(\([0-9]{3}\) |[0-9]{3}-)[0-9]{3}-[0-9]{4}$

Примечание. Для этого я использую интерфейс материалов. Я попытался сделать следующее: 

<input appPhoneMask matInput placeholder="Phone" formControlName="phone" >

и использовать файл маски телефона @Sajeetharan. Это работает на обычном вводе HTML, но ничего не делает, когда это matInput.

. Любая помощь очень ценится, поскольку я новичок в Angular.

1 Ответ

1 голос
/ 20 октября 2019

Вы можете справиться с этим с помощью директивы маски телефона следующим образом: 

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

STACKBLITZ DEMO

...