/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

0 vote308 views1 answer
Angular-bootstrap-md angular 10
Javascript AngularJS
0 vote295 views1 answer
Selected angular select
Javascript AngularJS
2 votes326 views1 answer
Nangular make window available
Javascript AngularJS
0 vote298 views1 answer
Angular property binding
Javascript AngularJS
0 vote298 views1 answer
Angular reactive form remove validation
Javascript AngularJS
43 votes488 views6 answers
Angular check if array is empty
Javascript AngularJS
12 votes317 views2 answers
Angular string contains
Javascript AngularJS
17 votes416 views2 answers
Angular random number between 1 and 10
Javascript AngularJS
0 vote319 views1 answer
Slice pipe in angular
Javascript AngularJS
0 vote286 views1 answer
Angular 10 get unique values from array of objects
Javascript AngularJS