Angulr6 自定义指令 限制输入正整数

第一式 创建自定义指令

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"
                 required
                 min=1
                 max=100
                 appPositiveInteger
                 placeholder="请输入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();
    }
  }
}