Angular: Numbers only directive

Question

I have this piece of code

  <input matInput type="number" [(ngModel)]="value"
  (ngModelChange)="onChange(true)" />

But I want to be able to enter only numbers, not other characters like + , . -

I found this directive https://stackblitz.com/edit/angular-numbers-only-directive?file=app%2Fapp.component.ts

The problem is that the onChange method is called even if I enter an invalid value. I don't want to put the same condition in the onChange method; I want to be able to modify the directive to emit the event or not. So it should only work if it's actually a number. I found some solutions with keyPress, but it is deprecated. I am using angular 19

Naren Murali · Accepted Answer · 2025-11-19 16:53:09Z

0

Ideally you should just set type="number" to block non numeric characters.

<input
  type="number"
  [ngModel]="value"
  numbersOnly
  (ngModelChange)="onChange($event)"
/>

In your code, you can just add an EventEmitter which fires only when a valid value is present.

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

@Directive({
  selector: 'input[numbersOnly]',
})
export class NumberDirective {
  @Output() valueChange = new EventEmitter();
  constructor(private _el: ElementRef) {}

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

Stackblitz Demo

answered Nov 19 at 16:53

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

1 Comment

Eliseo Nov 20 at 8:29

Please, check the position of the cursor when change, see, e.g. this SO, and it's important check if is applied to a NgModel or FormControl

Lako12 · Accepted Answer · 2025-11-20 13:58:11Z

I found a solution that seems to work. It handles both the cursor and the event emit.

<input matInput numbersOnly [(ngModel)]="value"
    (ngModelChange)="onChange(true)" />

Directive

import {Directive, HostListener} from "@angular/core";

@Directive({
    selector: '[numbersOnly]',
})
export class NumbersOnlyDirective {
    private readonly regExpr = new RegExp('^([1-9]\\d*|0)$');

    constructor() {
    }

    @HostListener('beforeinput', ['$event'])
    onBeforeInput(event: InputEvent) {
        if (!event.data) {
            return;
        }

        const input = event.target as HTMLInputElement;

        const currentVal = input.value;
        const start = input.selectionStart || 0;
        const end = input.selectionEnd || 0;

        const nextVal =
            currentVal.substring(0, start) + event.data + currentVal.substring(end);

        if (!this.regExpr.test(nextVal)) {
            event.preventDefault();
        }
    }
}

Collectives™ on Stack Overflow

Angular: Numbers only directive

2 Answers 2

Stackblitz Demo

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related