Loading

Phone number format directive in angular ver 2+?

Reena Lakra

I want to create a phone format custom directive in angular version 2+, i.e.

whenever user enter text like "1234567895" then it convert it into "(123)456-7895" like that.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Mahesh Verma8y ago
Accepted answer
Try the following code, I hope it may help you :
@HostListener('blur') blur(eventData:Event){
      let val:string="";
      val=this.eleRef.nativeElement.value;
      if (val.length > 0) {
         var abc = val.match(new RegExp('.{1,6}', 'g')).join('-').split('-');
         abc[0] = abc[0].match(new RegExp('.{1,3}', 'g')).join(')');
         val = "(" + abc.join('-');
     }
      this.eleRef.nativeElement.value=val;
console.log(val);
   }
+1
Reena Lakra8y ago
Thanks Mahesh Sir, it works. But I have a little problem in this, whenever I clicked on textbox again then it again put dashes. However, i am trying to figure out this.
+1