Angular 2- Change text display format as per pattern

Question

I want to change display format of text field input for Mobile number. Ex.

For number 1212121212, it should display (121) 212-1212 inside text and just for view purpose only. I also want full text on insert it into the DB. How can i achieve this in Angular 2 text input?

<p>How it is now</p>
<input type="text" value="1212121212" name="mobile"><br>
<p>How it should look</p>
<input type="text" value="(121) 212-1212" name="mobile2">

Not sure. But can we try pattern for first 6 char? After '-' i don't care about length of numbers — parth, Mar 22 '18 at 10:02
Possible duplicate of [Angular2 {pipes} - How to format a phone number?](https://stackoverflow.com/questions/36895431/angular2-pipes-how-to-format-a-phone-number) — HMarteau, Mar 22 '18 at 10:16
Use keydown event to replace value according to your pattern. Then when time has come to retrieve the raw value, replace everything but digits with an empty string. — Stphane, Mar 22 '18 at 10:18
@HMarteau Pipe is used for displayed data. But i want to use it inside text field — parth, Mar 22 '18 at 10:18
Hope this helps. [autoformat-ssn-while-entering-the-number](https://stackoverflow.com/questions/7685175/autoformat-ssn-while-entering-the-number) — Manukarthik Kattepura Ramesh, Jun 18 '19 at 17:14

score 4 · Accepted Answer · answered Mar 22 '18 at 10:20

4

You can do something like this with a pipe (just add a number at the end of the input).

I'm of course using a very simple regex, but you can create the one you want.

transform(value: string, args?: any): any {
  const regex: RegExp = new RegExp(/(\d{3})(\d{3})(\d{4})/);
  const match = value.match(regex);
  if(match) {
    return `(${match[1]})${match[2]}-${match[3]}`;
  } else {
    return value;
  }
}

answered Mar 22 '18 at 10:20

That's perfect. Just one question. Is it possible to start patterning from the first latter instead of 10 letters? Here after inserting 10 digits it is changing it's view. – parth Mar 22 '18 at 10:26
Yes, that's what I told you, for that you will need a monstruous regex (or several little regexes). – Mar 22 '18 at 10:26
as a piece of advice, if you use several little regexes, start with the biggest one, and finish with the simplest one. Otherwise, you might be surprised by the results you get. – Mar 22 '18 at 10:29

Angular 2- Change text display format as per pattern

1 Answers1