Значение параметра ngModel после директивы

Question

У меня следующая проблема:

У меня есть поле ввода номера телефона, подобное этому:

Я хочу замаскироватьтекст, такой как 55-5555-5555, поэтому я создал директиву:

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

@Directive({
  selector: '[appPhoneNumber]'
})
export class PhoneNumberDirective {

 constructor(public ngControl: NgControl) { }

  ngOnInit() {
    this.windowReady(this.ngControl.model);

  }

  windowReady(value) {
    this.onInputChange(value, false);
  }

  @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 <= 2) {
      newVal = newVal.replace(/^(\d{0,3})/, '$1');
    } else if (newVal.length <= 6) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})/, '$1-$2');
    } else if (newVal.length <= 10) {
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})(\d{0,4})/, '$1-$2-$3');
    } else {
      newVal = newVal.substring(0, 10);
      newVal = newVal.replace(/^(\d{0,2})(\d{0,4})(\d{0,4})/, '$1-$2-$3');
    }
    console.log("New value is: " + newVal);
    this.ngControl.valueAccessor.writeValue(newVal);
  }
}

И вот поле ввода:

<mat-form-field style="width: 75%;">
  <input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono">
</mat-form-field>

Как видите, вход имеет ngModelДля получения и установки значения проблема, с которой я сейчас сталкиваюсь, заключается в том, что когда впервые появляется ввод, и ngModel имеет значение, поле отображает текст, подобный:

5555555555

Вместо:

55-5555-5555

Моя теория прямо сейчас заключается в том, что директива устанавливает значение:

this.ngControl.valueAccessor.writeValue(newVal);

Перед самим вводом:

<input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono">

Таким образом, когда вход устанавливает значение, он принимает значение без маски и переопределяет текст, установленный директивой.

Кто-нибудь знает, как вызвать директиву после ngModel или что-то, что мне помогает?

Answer 1

ng-mask может быть то, что вы ищете.

<input matInput appPhoneNumber placeholder="Telefono" [(ngModel)]="person.numero_telefono" mask='55-5555-5555'>

Вот ссылка для получения дополнительной информации ng-mask

Answer 2

Проблема не связана с контролем [(ngModel)] или Input.Фактическая причина этой проблемы - директива matInput.Просто удалите matInput и проверьте.

Answer 3

Я верю, что вы хотите трубку, а не директиву.Если вы посмотрите на этот пост, он расскажет о том, как использовать канал с ngModel Использование конвейеров в ngModel на элементах INPUT в Angular