仅角输入数字

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

您可以设置type=number和step =“ 0.01” min =“ 0” lang =“ zh-cn” value =“ 5.10”以使用小数点分隔符e和仅数字：

<input type="number" step="0.01" min="0" lang="en" value="5.10">