欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-18 08:14:58
1、建立一个独立模块用于作为公用指令的模块 1)生成模块 ng g m directive 2)进入指令模块目录 cd directive...

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

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