angular2中input只允许输入数字，而且数字有千分位格式

直接奔主题，不扯淡：

需求：在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}}"

(ngModelChange)="config.value = switchNumber.transform($event)">

onlyNumber是指令名称，switchNumber是自定义管道，把1，000 = > 1000

当然，你也可以直接把两个功能都在指令里面处理，但是合理的分工可以简化问题和提高复用性。

扯淡完毕，本人能力不足，如果不当或者有更好的解决方案，欢迎各位大侠批评指正。也可以私聊我进行技术交流。