angular2中input只允許輸入數字，而且數字有千分位格式
阿新 • • 發佈：2019-01-23
直接奔主題，不扯淡：
需求：在angular2表單中，input只允許使用者輸入數字，而且要把數字格式化顯示，比如1000 => 1,000
思考：用type=number能不能達到？
<input type="number" class="form-control" ngModel="{{config.value|number}}" (ngModelChange)="config.value = switchNumber.transform($event)">switchNumber是自定義管道，主要是把1,000再次轉換成1000，這樣一看好像還真行，於是屁顛屁顛就跑起來了。
發現有一個警告：The specified value "1,111" is not a valid number。
因為1,000不是一個number，所以這個方案行不通。
於是乎我們可以不可以在keyup的時候控制呢？只允許使用者輸入數字：
@HostListener('keydown', ['$event']) onKeyDown(event) {if(通過code判斷按下的時候是數字鍵){ return;}else{event.preventDefault();//住址瀏覽器的預設行為}通過測試這個方案是可以達到只允許使用者輸入數字的，至於格式化可以這樣使用：
<input type="text" onlyNumber class="form-control" ngModel="{{config.value|number}}"onlyNumber是指令名稱，switchNumber是自定義管道，把1，000 = > 1000
當然，你也可以直接把兩個功能都在指令裡面處理，但是合理的分工可以簡化問題和提高複用性。
扯淡完畢，本人能力不足，如果不當或者有更好的解決方案，歡迎各位大俠批評指正。也可以私聊我進行技術交流。