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

【问题标题】：Allow only numbers in a text input with Angular仅允许使用 Angular 输入文本中的数字
【发布时间】：2018-05-27 18:00:51
【问题描述】：

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

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/

我也试过这个：

【问题讨论】：

@Günter Zöchbauer 你能帮忙吗？
我希望你没有使用“Angular 2”，因为它是一年多前的版本。框架的名称是“Angular”，而不是“Angular 2”。目前是第 5 版，每年发布两次新版本。由于它大部分是向后兼容的，因此请在提出广泛的问题时不要指定版本号。
是的，我没有使用 angular 2，因为我已经习惯了这个版本，所以我提到实际上我使用的是 angular 版本 5

标签： angular typescript angular2-directives

【解决方案1】：

您可以使用Ng Knife 实用程序

导入 NgKnifeModule

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

使用它：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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;
    }

【讨论】：

所有这些代码都是不必要的。通过限制允许进入该字段的输入，可以在模板级别轻松处理。
当我包含这个时，它不允许任何内容进入文本框并且使用鼠标复制粘贴仍然允许字符串值..
我给的小提琴在所有情况下都能正常工作，但它的角度为 1