angular inputNumber指令输入框只能输入数字的实现
1、建立一个独立模块用于作为公用指令的模块
1)生成模块
nggmdirective
2)进入指令模块目录
cddirective
3)生成一个只能输入数字的指令类
nggdnumberinput
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 ] }) exportclassDirectiveModule{}
5)指令类numberinput.directive.ts代码如下
@Directive({ selector:'input[numberInput]' }) exportclassNumberInputDirective{ //tslint:disable-next-line:no-input-rename @Input('numberInput')numberType:string; constructor(privateel: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{ constvalue=String(floatValue); constreg=/^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/.test(value); constnumBegin=/^\d/.test(value); constnumEnd=/\d$/.test(value); if(reg&&numBegin&&numEnd){ this.el.nativeElement.value=value; }else{ this.el.nativeElement.value=0; } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。
声明:本文内容来源于网络,版权归原作者所有,内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:czq8825#qq.com(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。