angularinputNumber指令输入框只能输入数字的示例分析
小编给大家分享一下angular inputNumber指令输入框只能输入数字的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联专注于网站建设、网站制作、网页设计、网站制作、网站开发。公司秉持“客户至上,用心服务”的宗旨,从客户的利益和观点出发,让客户在网络营销中找到自己的驻足之地。尊重和关怀每一位客户,用严谨的态度对待客户,用专业的服务创造价值,成为客户值得信赖的朋友,为客户解除后顾之忧。
1、建立一个独立模块用于作为公用指令的模块
1)生成模块
ng g m directive
2)进入指令模块目录
cd directive
3)生成一个只能输入数字的指令类
ng g d numberinput
4)指令模块directive.module.ts代码如下
import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NumberinputDirective } from './numberinput.directive'; @NgModule({ imports: [ CommonModule ], declarations: [NumberinputDirective], exports:[ // 使引用该模块的类可以使用该指令 NumberinputDirective ] }) export class DirectiveModule { }
5)指令类numberinput.directive.ts代码如下
@Directive({ selector: 'input[numberInput]' }) export class NumberInputDirective { // tslint:disable-next-line: no-input-rename @Input('numberInput') numberType: string; constructor(private el: ElementRef) {} @HostListener('input', ['$event.target.value']) onChange(value: string): void { if (this.numberType.length < 1) { this.updateIntegerValue(value); } else { this.el.nativeElement.value = value.replace(/[^\d.]/g, ''); } } @HostListener('blur', ['$event.target.value']) onBlur(value: number): void { if (this.numberType.length >= 1) { this.updateFloatValue(value); } } updateIntegerValue(value: string): void { this.el.nativeElement.value = value.replace(/[^\d]/g, ''); } updateFloatValue(floatValue: number): void { const value = String(floatValue); const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/.test(value); const numBegin = /^\d/.test(value); const numEnd = /\d$/.test(value); if (reg && numBegin && numEnd) { this.el.nativeElement.value = value; } else { this.el.nativeElement.value = 0; } } }
以上是“angular inputNumber指令输入框只能输入数字的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
当前名称:angularinputNumber指令输入框只能输入数字的示例分析
分享地址:http://myzitong.com/article/gcjsch.html