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（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。