Angular 仅允许在带有角度的文本输入中输入数字

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

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

这很好，但用户可以在文本框中输入值，然后我的指令将删除非数字的值，但我想阻止用户输入文本框，我如何实现这一点

我还想介绍一下鼠标的复制粘贴场景

我有一个在AngularJS（1.x）中工作得非常好的Plunker，我如何转换成AngularJS？我无法使用解析器

我也试过：

---

您的指令代码应包含以下内容

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

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

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, ''));
  }
}

您可以使用实用程序

导入NgKnifeModule

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

使用它：

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

---

所有这些代码都是不必要的。通过限制字段中允许的输入，可以很容易地在模板级别处理它，它不允许任何东西进入文本框，使用鼠标复制粘贴仍然允许字符串值。我给的小提琴在所有情况下都能很好地处理，但在角度上除外1@Günter Zöchbauer你能帮忙吗？我希望你没有使用“Angular 2”，因为它是一年多前的版本。框架的名称是“Angular”，而不是“Angular 2”。目前是第5版，新版本每年发布两次。因为它大部分是向后兼容的，所以在问广泛的问题时请不要指定版本号。是的，我没有使用angular 2，因为我已经习惯了这个版本，我提到实际上我使用的是angular 5