In angular 9 how to make an text input field number only? [duplicate]

Question

I have a text input field where I want to apply a custom directive so that user is allowed to only enter numbers. I have created this directive but it seems event.stopPropagation() is not working. Any suggestion?

import { Directive, ElementRef, HostListener, Input } from '@angular/core'; @Directive({ selector: '[appNumbersOnly]' }) export class NumbersOnlyDirective { 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(); } } }

Does this answer your question? Angular2 - Input Field To Accept Only Numbers — Yong Shun
– Yong Shun, Commented Jun 4, 2021 at 7:57

N.F. · Accepted Answer · 2021-06-04 07:36:02Z

1

You can do it without directive. Only you have to do is add type="number".

<input type="number" ...>

answered Jun 4, 2021 at 7:36

N.F.

4,2025 gold badges29 silver badges63 bronze badges

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

1 Comment

Sayed Uz Zaman Over a year ago

But that is not the best solution. we need to know why stopPropagation is not working. If u have some other directives that allows only alphanumeric chars. So to make them working u need to fix that issue

Collectives™ on Stack Overflow

In angular 9 how to make an text input field number only? [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related