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

最新推荐文章于 2024-09-03 19:02:32 发布

蝼蚁筑巢

最新推荐文章于 2024-09-03 19:02:32 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： angular

本文链接：https://blog.youkuaiyun.com/maoguiyou/article/details/79552593

angular 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Angular2应用中如何实现input输入框只允许用户输入数字，并且数字会自动格式化为千分位形式，如1000显示为1,000。首先尝试使用type=number，但遇到警告，因为1,000无法转换为有效数字。接着采用keyup事件监听并限制输入，同时结合自定义管道switchNumber将1,000转换回1000，确保数据正确处理。作者也提出指令处理这一功能的可能性，以提高代码复用性。" 120743552,9867480,Guava RateLimiter在API限流中的优雅实践,"['Java', '并发控制', 'Guava库', '限流策略', '软件设计']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接奔主题，不扯淡：

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

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

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