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的输入和一个标有自定义指令的输入，该指令在读取时格式化模型值（并将修改模型以匹配第一次更改后的格式化值）输入）。

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

您可能需要在此处阅读有关ngModelController的更多信息： http://docs.angularjs.org/api/ng.directive:ngModel.NgModelController