仅允许使用Angular输入文本中的数字

Question

我正在尝试编写代码，只允许文本输入文本中的数字。我写了以下指令。

import { Directive, ElementRef, Input, HostListener } from '@angular/core'

@Directive({
    selector: '[appAllowNumberonly]'
})
export class AllowNumberonlyDirective {

    private el: HTMLInputElement;

    constructor(private elementRef: ElementRef) {
        this.el = this.elementRef.nativeElement;
    }

    @HostListener("keydown", ["$event"])
    onKeyDown(e: KeyboardEvent) {
        if (this.el.value == undefined) {
            this.el.value = '';
        }
        let transformedInput = this.el.value.replace(/[^0-9]/g, '');
        if (transformedInput != this.el.value) {
            this.el.value = transformedInput;
        }
    }

    @HostListener("keyup", ["$event"])
    onKeyUp(e: KeyboardEvent) {
        if (this.el.value == undefined) {
            this.el.value = '';
            e.preventDefault();
        }
        let transformedInput = this.el.value.replace(/[^0-9]/g, '');
        if (transformedInput != this.el.value) {
            this.el.value = transformedInput;
        }
        return transformedInput;
    }

    @HostListener("blur", ["$event.target.value"])
    onBlur(value) {
        if (this.el.value == undefined) {
            this.el.value = '';
        }
        let transformedInput = this.el.value.replace(/[^0-9]/g, '');
        if (transformedInput != this.el.value) {
            this.el.value = transformedInput;
        }
    }
 }

这工作得非常好，但是用户能够在文本框中输入值然后我的指令正在删除非数字值，但我想阻止用户进入文本框，我该如何实现

我想用鼠标覆盖复制粘贴场景。

我有以下的plunker在AngularJS（1.x）中工作得非常好，我该如何转换为Angular？我无法使用解析器。

http://jsfiddle.net/thomporter/DwKZh/

任何人都可以帮助将上面的小提琴转换为Angular或修复我上面复制的指令。

我也试过这个：

Answer 1

试试这个指令。侦听输入事件以处理复制和粘贴。

export class NumberOnlyDirective {
  constructor(private el: NgControl) {}

  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    // NOTE: use NgControl patchValue to prevent the issue on validation
    this.el.control.patchValue(value.replace(/[^0-9]/g, ''));
  }
}

Answer 2

您可以使用Ng Knife实用程序

1. 导入NgKnifeModule

   ... 
   import { NgKnifeModule } from 'ng-knife';
   ...
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       NgKnifeModule
     ],
     ...
   });
   export class AppModule { }

2. 使用它：

   <!-- Only Numbers -->
   <input knifeOnlyNumbers type="text">

Answer 3

你的指令代码应该有这个

@HostListener("keypress",['$event']) onKeyPress(e){
        var char=e.char;
        var regExp = new RegExp(/[0-9.]/);
        if (regExp.test(char)) 
            return true
        else
            return false;
    }