PrimeNG p-inputNumber with currency does not force input only of numbers using mobile devices

Question

Im using <p-inputNumber> tag from PrimeNG.

In computer view, the input only allows to enter numbers. If I press any letter with the keyboard, the letter will not be written on the input. All okey.

But, when Im using mobile device (android with chrome), the web browser allows me to write anything else.

I have been reading some posts about force input numeric with basic html <input> tag. But, as I said, I'm using primeng tag <p-inputNumber> with currency options:

<p-inputNumber [(ngModel)]="newExpenseAmount" [style]="{width: '100%'}" mode="currency" currency="EUR" locale="es-ES"></p-inputNumber>

¿Any way to make it works fine in mobile devices? ¿Any way to force numeric keyboard on mobile devices compatible with this primeng component?

Answer 1

You can access the input itself and set the type:

HTML:

<p-inputNumber #input [(ngModel)]="newExpenseAmount" [style]="{width: '100%'}" mode="currency" currency="EUR" locale="es-ES"></p-inputNumber>

Class:

@ViewChild('input') public input: InputNumber

public ngAfterViewInit(): void {
    (this.input.input.nativeElement as HTMLElement).setAttribute("type", "tel");
}