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

Encountering an error when attempting to add the 'shelljs' module to an Angular 2 TypeScript project

Testing Services in Angular4: A Comprehensive Guide

The getStaticProps() function in NextJS has not been invoked

Steps for retrieving multiple documents from Firestore within a cloud function

Improve Observable to prevent type assertion errors

Angular child routes experiencing encryption

How to Retrieve Properties from Child Elements in NativeScript ngFor Directive

Tips on ensuring all fields are mandatory in a form

Unable to utilize SASS variables in Angular from a global file, even though other styles are functioning correctly

Troubleshooting the issue of having multiple menu items in Material UI

Disregard earlier callback outcome if there has been a change in the state since then

Issue with exporting member in VS Code but not in console

"Slow loading times experienced with Nextjs Image component when integrated with a map

The issue with the react-diagram stemmed from a conflict with @emotion/core

What is the best way to link a specific version of the @types package to its corresponding JavaScript package version?

Position the text alongside the thumbnail rather than in the center

What is the process for assigning a predefined type that has already been declared in the @types/node package?

Passing a click event to a reusable component in Angular 2 for enhanced functionality

Angular application unable to invoke the Web API GET method

The authentication0 router fails to initiate navigation