Allow only numbers in a text input with Angular

Question

I am trying to write code which will allow only numbers in a text input text. I've written the following directive.

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;
        }
    }
 }

This works perfectly fine, but user is able to enter value into the text box and then my directive is removing the values that are non-numeric, but I want to stop user from entering into the textbox, how can I achieve that?

I want to cover copy paste scenario with mouse as well.

I have below Plunker which works perfectly fine in AngularJS (1.x), how do I convert to Angular? I am unable to use parsers.

http://jsfiddle.net/thomporter/DwKZh/

I also tried this:

I hope you're not using "Angular 2" because it's the version from more than one year ago. The name of the framework is "Angular", not "Angular 2". It is currently in version 5, and a new version is released twice a year. Since it's mostly backward compatible, please do not specify the version number when asking broad questions. — Lazar Ljubenović
– Lazar Ljubenović, Commented Dec 13, 2017 at 19:34
Yes I am not using angular 2, since i am used to this version i mentioned that actually i am using angular version 5 — VR1256
– VR1256, Commented Dec 13, 2017 at 19:36

Marcelo · Accepted Answer · 2018-09-01 22:30:32Z

6

You can use Ng Knife utility

Import NgKnifeModule

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

Using it:

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

edited Sep 1, 2018 at 22:30

answered Aug 27, 2018 at 14:48

Marcelo

711 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

R3tep · Accepted Answer · 2019-05-29 14:29:26Z

6

Try this directive. Listen for the input event to also handle copy and paste.

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

edited May 29, 2019 at 14:29

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

answered May 31, 2018 at 13:26

Ben Gulapa

1,61914 silver badges10 bronze badges

Comments

Rohit Ramname · Accepted Answer · 2017-12-13 18:41:30Z

0

your directive code should have this

@HostListener("keypress",['$event']) onKeyPress(e){
        var char=e.char;
        var regExp = new RegExp(/[0-9.]/);
        if (regExp.test(char)) 
            return true
        else
            return false;
    }

answered Dec 13, 2017 at 18:41

Rohit Ramname

8342 gold badges9 silver badges24 bronze badges

3 Comments

Chris Sharp Over a year ago

All of this code is unnecessary. It can easily be handled at the template level by restricting the input allowed into the field.

VR1256 Over a year ago

when I include this, it doesn't allow anything into textbox and copy paste using mouse still allows string values..

VR1256 Over a year ago

The fiddle i gave just works fine and handles in all scenarios but its in angular 1

Collectives™ on Stack Overflow

Allow only numbers in a text input with Angular

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related