angular inputNumber指令输入框只能输入数字的实现


Posted in Javascript onDecember 03, 2019

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;
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
Jan 16 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
浅谈jquery点击label触发2次的问题
Jun 12 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
微信小程序实现图片压缩
Dec 03 #Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 #Javascript
You might like
php实现12306余票查询、价格查询示例
2014/04/17 PHP
两个php日期控制类实例
2014/12/09 PHP
PHP常用的小程序代码段
2015/11/14 PHP
PHP重置数组为连续数字索引的几种方式总结
2018/03/12 PHP
jquery中常用的SET和GET$(”#msg”).html循环介绍
2013/10/09 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
javascript的BOM汇总
2015/07/16 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
基于jQuery实现的打字机效果
2017/01/16 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
JavaScript中如何判断一个值的类型
2017/09/15 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
vue中将html字符串转换成html后遇到的问题小结
2018/12/10 Javascript
python操作xml文件详细介绍
2014/06/09 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
python定时复制远程文件夹中所有文件
2019/04/30 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
Python timeit模块的使用实践
2020/01/13 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
Opencv+Python识别PCB板图片的步骤
2021/01/07 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
大学生职业规划前言模板
2013/12/27 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书