Field that only permits numerical input without triggering events for other characters

Question

Field that only permits numerical input without triggering events for other characters

I've encountered some issues with the default behavior of the HTML number input and I'm looking to create a simple input that only allows numbers.

To address this, I have developed a directive as shown below:

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

}

Despite using "event.stopPropagation()", I find that the event still propagates even when the input value remains unchanged from the user's perspective.

How can I prevent event propagation when the field value hasn't changed?

Edit: To provide better clarity, here is a StackBlitz example: https://stackblitz.com/edit/angular-numbers-only-directive

angular typescript angular-directive

Answer 1

Answer №1

It doesn't seem possible to prevent this event using a directive with HostListener.

~~Angular seems to detect the event before your listener is called, so stopping propagation may not have an effect on Angular events like ngModelChange that you react to in the parent component.~~ (This is unconfirmed, so I could be mistaken)

My suggestion would be to create your own event to indicate a value change and emit it only when you want it to be emitted:

export class NumberDirective {
  @Output() numberChanged = new EventEmitter<number>();

  constructor(private _el: ElementRef) { }

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

}

Then, replace the binding of ngModelChanged with numberChanged:

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

Demo: https://stackblitz.com/edit/angular-numbers-only-directive-a2mv6e

Answer 2

It doesn't seem possible to prevent this event using a directive with HostListener.

~~Angular seems to detect the event before your listener is called, so stopping propagation may not have an effect on Angular events like ngModelChange that you react to in the parent component.~~ (This is unconfirmed, so I could be mistaken)

My suggestion would be to create your own event to indicate a value change and emit it only when you want it to be emitted:

export class NumberDirective {
  @Output() numberChanged = new EventEmitter<number>();

  constructor(private _el: ElementRef) { }

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

}

Then, replace the binding of ngModelChanged with numberChanged:

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

Demo: https://stackblitz.com/edit/angular-numbers-only-directive-a2mv6e

Answer 3

Answer №2

To utilize in reactive forms, I developed a unique custom component that implements ControlValueAccessor:

Here is a snippet of the component declaration:

@Component({
  selector: 'number',
  template: `
    <input type="text" [(ngModel)]="value" numbersOnly/>
  `,
  ...
  ]
})
export class NumberInputComponent implements ControlValueAccessor {
  ...

  set value(value) {
    const tmp = value.replace(/[^0-9]*/g, '');
    if(tmp && tmp !== '' && +tmp !== +this._value) {
      this._value = +tmp;
      this.onChange(this._value);
    }
  }

  ...
}

Usage Example:

<number [formControl]="formControl"></number>

Check out the stackblitz demo here.

Answer 4

To utilize in reactive forms, I developed a unique custom component that implements ControlValueAccessor:

Here is a snippet of the component declaration:

@Component({
  selector: 'number',
  template: `
    <input type="text" [(ngModel)]="value" numbersOnly/>
  `,
  ...
  ]
})
export class NumberInputComponent implements ControlValueAccessor {
  ...

  set value(value) {
    const tmp = value.replace(/[^0-9]*/g, '');
    if(tmp && tmp !== '' && +tmp !== +this._value) {
      this._value = +tmp;
      this.onChange(this._value);
    }
  }

  ...
}

Usage Example:

<number [formControl]="formControl"></number>

Check out the stackblitz demo here.

Field that only permits numerical input without triggering events for other characters

Answer №1

Answer №2

Similar questions

Differences between useFormState and useForm in Next.js version 14

Navigating from a Card to a new View in Angular

What is the method for extracting individual elements from an object returned by a React hook in Typescript?

Having difficulty grasping the significance of the data received from the API response

Invoke the method saved as a class attribute

What is the most effective way to determine the data type of a variable?

Vertical and horizontal tabs not functioning properly in Mat tabs

Unable to loop through the "dataList" retrieved from a service call to the java backend within an Angular 9 application

The TypeScript fs/promises API is experiencing compilation issues when used in JavaScript

Angular displays X items in each row and column

declare wrong TypeScript type in external library

What is the process for clearing a selection from a table?

Utilizing Angular for handling multiple subscriptions

Error in TypeScript in VSCode when using the React.forwardRef function in a functional component

The conditional expression is failing to function properly when applied to multiple form controls in the latest version of @rxweb/[email protected]

Angular is intercepting HTTP subscriptions without finalizing them

What is the reason behind my styled component only displaying the final state in its className logs?

``If you're looking to integrate a 360-degree product viewer into your Angular application, here is a

What is the process for including a dependency in an npm package in order to install another npm package?

When hosting on render.com, the session data is not retained when redirecting to other routes