第一式 创建自定义指令
ng g d directives/positive-integer --module=xxx xxx指你所需要申明指令的模块，一般用作根模块，如果用懒加载可以放在公共模块内
第二式 定义指令匹配正则表达式
private regex: RegExp = new RegExp(/^[1-9]\d*$/); ^[1-9]\d*$为限制正整数
第三式 设置监听按键时的特殊按键
private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
第四式 构造器获取原生对象
constructor(private el: ElementRef) { }
第五式 监听，使用@HostListener和onKeyDown事件
@HostListener('keydown', ['$event'])onKeyDown(event: KeyboardEvent) {if (this.specialKeys.indexOf(event.key) !== -1) {return;}const current: string = this.el.nativeElement.value;const next: string = current.concat(event.key);if (next && !String(next).match(this.regex)) {event.preventDefault();}}
第六式 想用就用
<input type="number"class="ant-input small-input"name="activityValue"requiredmin=1max=100appPositiveIntegerplaceholder="请输入1~100之间的整数"[(ngModel)]="virtualDiscount.activityValue"/>
完整代码
import {Directive, ElementRef, HostListener} from '@angular/core';@Directive({selector: '[appPositiveInteger]'})export class PositiveIntegerDirective {private regex: RegExp = new RegExp(/^[1-9]\d*$/);private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];constructor(private el: ElementRef) { }@HostListener('keydown', ['$event'])onKeyDown(event: KeyboardEvent) {if (this.specialKeys.indexOf(event.key) !== -1) {return;}const current: string = this.el.nativeElement.value;const next: string = current.concat(event.key);if (next && !String(next).match(this.regex)) {event.preventDefault();}}}
