強制輸入電話號碼格式

我已經繼承了一個項目，並且客戶要求進行合理的更改。目前，當用戶輸入電話號碼，我們有：強制輸入電話號碼格式

<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的新手，我甚至不知道如何強制這個。確保綁定到模型的數據採用適當格式的最佳方法是什麼？

它在我看來像ui-mask不會更新格式化電話號碼的模型，我確信這是設計。我認爲您可以繼續在所有輸入中使用ui-mask來顯示電話號碼並保留模板值的未格式化。

另一個選擇是使用ngModelController格式器/解析器的一些組合，並推出自己的解決方案（包括實現自己的驗證）。由於ui-mask指令將解析器函數放到ngModelController上，如果您嘗試同時使用ui-mask和您自己的解析器函數，則可能會遇到衝突。

我做了一個小例子，其中帶有用ui-mask標記的輸入和一個用自定義指令標記的輸入，該指令在讀取時對模型值進行格式化（並且將修改模型以匹配第一次更改後的格式化值輸入）。

這個例子是不是全面，但更多的方式可以幫助您根據您的需求決定最佳的行動方案。

2014-02-12 23:33:36

回答