Angular2 - 仅接受数字的输入字段

Question

在 Angular 2 中，如何屏蔽输入字段（文本框），使其仅接受数字而不接受字母字符？

我有以下 HTML 输入：

 <input
  type="text"
  *ngSwitchDefault
  class="form-control"
  (change)="onInputChange()"
  [(ngModel)]="config.Value"
  (focus)="handleFocus($event)"
  (blur)="handleBlur($event)"
/>

上面的输入是一个通用的文本输入，它既可以用作简单的文本字段，也可以用作数字字段，例如，显示年份。

使用 Angular 2，我如何使用相同的输入控件并在此字段上应用某种过滤器/掩码，以便它只接受数字？

我可以通过哪些不同的方式实现这一目标？

注意：我只需要使用文本框而不是使用输入数字类型来实现这一点。

原文由 Aniruddha Pondhe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 angular2 指令。 笨蛋

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

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

  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
      if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+C
        (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+V
        (e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
        // Allow: Ctrl+X
        (e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
        // Ensure that it is a number and stop the keypress
        if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
            e.preventDefault();
        }
      }
  }
}

并且您需要在输入中将指令名称作为属性写入

<input OnlyNumber="true" />

不要忘记在模块的声明数组中编写指令。

通过使用正则表达式，您仍然需要功能键

export class OnlyNumber {

  regexStr = '^[0-9]*$';
  constructor(private el: ElementRef) { }

  @Input() OnlyNumber: boolean;

  @HostListener('keydown', ['$event']) onKeyDown(event) {
    let e = <KeyboardEvent> event;
    if (this.OnlyNumber) {
        if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
        // Allow: Ctrl+A
        (e.keyCode == 65 && e.ctrlKey === true) ||
        // Allow: Ctrl+C
        (e.keyCode == 67 && e.ctrlKey === true) ||
        // Allow: Ctrl+V
        (e.keyCode == 86 && e.ctrlKey === true) ||
        // Allow: Ctrl+X
        (e.keyCode == 88 && e.ctrlKey === true) ||
        // Allow: home, end, left, right
        (e.keyCode >= 35 && e.keyCode <= 39)) {
          // let it happen, don't do anything
          return;
        }
      let ch = String.fromCharCode(e.keyCode);
      let regEx =  new RegExp(this.regexStr);
      if(regEx.test(ch))
        return;
      else
         e.preventDefault();
      }
  }
}

原文由 omeralper 发布，翻译遵循 CC BY-SA 3.0 许可协议