/Javascript/AngularJS/Angular format phone number while typing

Angular format phone number while typing

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

Source: stackoverflow.com

Similar codes

1 vote129 views1 answer
Nativeelement angular add class
Javascript AngularJS
0 vote122 views2 answers
Utiliser les données passees a un modal dans son propre composant en angular
Javascript AngularJS
0 vote116 views1 answer
Filter table with multiple input in angular
Javascript AngularJS
1 vote112 views3 answers
Dynamically add id ro div in angular using forloop ngfor
Javascript AngularJS
0 vote125 views1 answer
Scope hierarchy in angularjs
Javascript AngularJS
0 vote120 views1 answer
Angular erro ao adicionar um projeto no firebase Failed to make request to https://www.gstatic.com/firebasejs/releases.json
Javascript AngularJS
0 vote113 views1 answer
Angular implementing Validator
Javascript AngularJS
0 vote114 views1 answer
How to add dropdown with filter in angular material
Javascript AngularJS
24 votes141 views6 answers
Angular routes
Javascript AngularJS
0 vote129 views1 answer
How to bind two ng-content in a component angular
Javascript AngularJS