AngularJs: How to Format Data in an Input?

Question

Problem

I need to format an input field visually in order to help the user know what they should type as a phone number. For example, I want to accept a phone number as being a 3 digit area code, 3 digit prefix and 4 digit suffix: (207) 555-1212. I want to:

1. provide the helper formatting to the input field -- those parentheses and the hyphen
2. I don't want the 'helper' characters to be included in the actual data I store in my model.
3. As the user types, I want the parentheses to magically appear, then have the hyphen also appear at the right point.

What's the best way to do it?

Note: This is not for displaying of a number -- I could use a filter for that. This is for formatting data within an input field.

Thanks for your help!

Answer 1

If you are looking for a simple solution, you could give AngularUI a try, http://angular-ui.github.com/

This is the example from the "Mask" section of that page:

<input ng-model="maskDemo" ui-mask="'99-99-9999'">

The "9"'s are numbers, and other stuff is just a mask / placeholders. It should only submit the actual values. You would edit the mask to include parentheses and anything else you may need.