仅输入数字 Angular

Question

我正在尝试实现一个输入字段，其中只允许使用数字键。为此，我已经成功地在表单中实现了仅数字验证。

但这里的要求是除了数字键外，其他键都不能用。为此，我绑定了一个 @HostListener

在这种情况下，当我们点击字母键时，它不会显示在输入字段中，但会分配该字母的值。

请检查代码： HostListener 代码：

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

@Directive({
  selector: 'input[numbersOnly]'
})
export class NumberDirective {

  constructor(private _el: ElementRef) { }

  @HostListener('input', ['$event']) onInputChange(event) {
    const initalValue = this._el.nativeElement.value;
    this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, '');
    if ( initalValue !== this._el.nativeElement.value) {
      event.stopPropagation();
    }
  }

}

HTML :

Type anything other than numbers, the change is fired even if the textfield content does not change :
<br/>
<input type="text" [(ngModel)]="value" (ngModelChange)="onChange($event)" numbersOnly/>
<br/>
Change fire counter : {{counter}}
<br>
Value = {{value}}

TS 文件：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  value='';
  counter = 0;

  onChange(event) {
    this.counter = this.counter + 1; 
  }
}

所以看到实际代码运行请点击：https://stackblitz.com/edit/angular-numbers-only-directive-tb66et

请帮忙。目的是该值不应只有数字字符。

此致，阿希什

Answer 1

看看你的正则表达式是正确的，当你控制 onChange 中的值时，该值是正确的。唯一的问题是它显示不正确，我尝试用 DetectionRef.detectChanges 手动更新它但没有帮助。我做了您需要的，但方式略有不同，请查看 .html 和指令 https://stackblitz.com/edit/angular-numbers-only-directive-xttsje

Answer 2

您可以尝试在指令中使用 keydown 事件，如此处所述

https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3

这里也用到：

Angular2 - Input Field To Accept Only Numbers

Answer 3

您可以通过检查他们的代码只允许数字：

<input type="number" 
    (keypress)="($event.charCode >= 48 && $event.charCode < 58)"/>

仅输入数字 Angular

Numbers only Input in Angular

angular-directive

angular