如何实现angular inputNumber指令输入框仅允许输入数字？

本文共计420个文字，预计阅读时间需要2分钟。

1. 创建一个独立模块用于公共指令：`ng g m public-directives`

2.进入指令模块目录：`cd public-directives`

3.生成一个只允许输入数字的指令类：`ng g d numberinput`

4.指令模块文件内容如下：

typescriptimport { NgModule } from '@angular/core';

@NgModule({ declarations: [ // 指令的入口文件名应与指令类名一致 'NumberInput' ], exports: [ 'NumberInput' ]})export class NumberInputModule { }

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

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