angular指令-inputNumber输入框只能输入数字

2019-12-02 admin

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

[转载]原文链接:https://segmentfault.com/a/1190000021174721

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80278.html

文章标题:angular指令-inputNumber输入框只能输入数字

相关文章
JS中Select下拉列表类(支持输入模糊查询)功能
下面给大家分享一段代码关于select下拉列表类支持输入模糊查询功能的实现代码,具体代码如下所示: &lt;span style=&quot;font-size:14px;&quot;&gt; &lt;HTML&gt; &lt...
2017-03-06
AngularJS 文件上传控件 ng-file-upload详解
网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://g...
2017-03-10
为什么AngularJS能够成功?
AngularJS 为什么成功了? 写在前面的话 继上一篇总结之后, 觉得必须补充一下 AngularJS 与 Ionic 的技术性话题 于是, 连夜写了这第一篇. 讲述了 AngularJS 与其他对手之间的优与缺. 我有任何理解错误, ...
2015-11-12
详解angular2封装material2对话框组件
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Componen...
2017-03-13
JavaScript实现简单的数字倒计时
这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下: runCount(10); function runCount(t){ if(t&gt;0){ document.getE...
2017-03-23
AngularJS:何时应该使用Directive、Controller、Servic
AngularJS是一款非常强大的前端MVC框架。同时,它也引入了相当多的概念,这些概念我们可能不是太熟悉。(译者注:老外真谦虚,我大天朝的码农对这些概念那是相当熟悉啊!)这些概念有: Directive(指令) Controller(控制...
2015-11-11
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
ajax分页效果(bootstrap模态框)
ajax分页效果图: 上干货: &#x2F;** * ajax分页 *&#x2F; $(function(){ $(&quot;.modal-body&quot;).find(&quot;.pagination&quot;...
2017-02-20
回到顶部