[英]Numbers only Input in Angular
I am trying to implement an input field, where only number keys are allowed.我正在尝试实现一个输入字段,其中只允许使用数字键。 For that I have successfully implemented the Numbers only validation in Forms.
为此,我已经成功地在表单中实现了仅数字验证。
But here the requirement is that no other keys should work except the number keys.但这里的要求是除了数字键外,其他键都不能工作。 For that I have tied to implement a @HostListener
为此,我绑定了一个 @HostListener
In this case, when we click on alphabet keys, it does not show in the input field, but the value get assigned which that alphabet.在这种情况下,当我们单击字母键时,它不会显示在输入字段中,但会分配该字母的值。
Please check the code: HostListener code:请检查代码: 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: 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 file: 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;
}
}
so see the actual code running please click on: https://stackblitz.com/edit/angular-numbers-only-directive-tb66et所以查看实际运行的代码请点击: https ://stackblitz.com/edit/angular-numbers-only-directive-tb66et
PLEASE HELP.请帮忙。 The intention is that the value should not have only number characters.
目的是该值不应只有数字字符。
Regards, Ashish问候, 阿希什
You can allow only numbers by checking their code:您可以通过检查他们的代码只允许数字:
<input type="number"
(keypress)="($event.charCode >= 48 && $event.charCode < 58)"/>
Look your regexp is correct and when you console the value in onChange
the value is correct.看看你的正则表达式是正确的,当你控制
onChange
中的值时,该值是正确的。 The only problem is that it doesn't display correctly, I tried to manually update it manually with DetectionRef.detectChanges but it did not help.唯一的问题是它无法正确显示,我尝试使用 DetectionRef.detectChanges 手动更新它,但没有帮助。 I did what you need but in little different way please look on.html and directive https://stackblitz.com/edit/angular-numbers-only-directive-xttsje
我做了你需要的,但方式略有不同,请查看 on.html 和指令https://stackblitz.com/edit/angular-numbers-only-directive-xttsje
You could try with keydown event in the directive as explained here您可以按照此处的说明尝试在指令中使用 keydown 事件
https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3 https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3
Also used here:也在这里使用:
Angular2 - Input Field To Accept Only Numbers Angular2 - 输入字段只接受数字
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.