强制输入电话号码格式

Question

我已经继承了一个项目，并且客户要求进行合理的更改。目前，当用户输入电话号码，我们有：

<input type="text" ng-model="phone.phoneNumber" ui-mask="999-999-9999" style="width:118px;" /> 

所以该数字似乎是在123-456-7890格式。但是，稍后查看时，显示为1234567890。我试过了：

<input type="text" ng-model="phone.phoneNumber" required ng-pattern="\(?(\d{3})\)?-?(\d{3})-(\d{4})" style="width:118px;" /> 

但是，这似乎导致它停止绑定。我是学习AngularJS的新手，我甚至不知道如何强制这个。确保绑定到模型的数据采用适当格式的最佳方法是什么？

Answer 1

它在我看来像ui-mask不会更新格式化电话号码的模型，我确信这是设计。我认为您可以继续在所有输入中使用ui-mask来显示电话号码并保留模板值的未格式化。

另一个选择是使用ngModelController格式器/解析器的一些组合，并推出自己的解决方案（包括实现自己的验证）。由于ui-mask指令将解析器函数放到ngModelController上，如果您尝试同时使用ui-mask和您自己的解析器函数，则可能会遇到冲突。

我做了一个小例子，其中带有用ui-mask标记的输入和一个用自定义指令标记的输入，该指令在读取时对模型值进行格式化（并且将修改模型以匹配第一次更改后的格式化值输入）。

这个例子是不是全面，但更多的方式可以帮助您根据您的需求决定最佳的行动方案。

http://plnkr.co/edit/fbZ5rLOKNwmDcmycc4UF

你可能想在这里更多的阅读了关于ngModelController： http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController