Ui mask value not matching ng model

Question

Hi I am using a ui mask to format a phone number in an input box. Problem is the ngmodel is not matching what I see on the screen. For example:

 <input type="text"  ui-mask="999-999-9999"  placeholder="xxx-xxx-xxxx"class="form-control" data-ng-model="search.phone"   maxlength="12" >

what i see on screen: 778-673-7892 ng-model value: 7786737892

How do I fix this?

Thanks

Answer 1

This is a little out-of-date, for those looking at the latest ui-mask (1.2, it may be in older versions as well), the official attribute that it's observing is "modelViewValue". Example:

<input type="text" ui-mask="999-999-9999" placeholder="xxx-xxx-xxxx" ng-model="search.phone" model-view-value="true">

This will preserve your model value to include look of the mask.

Answer 2

I know this has been completed, but I don't know if it has been officially released yet. Try doing this:

<input type="text"  ui-mask="999-999-9999"  placeholder="xxx-xxx-xxxx" class="form-control" data-ng-model="search.phone"   maxlength="12" ui-mask-use-viewvalue="true">

If it doesn't work, you can make the changes yourself, you just have to find the file the mask directive is in, and make the changes you see here