Allow only number in a ion-input with type=text Ionic

Question

I need to make the following input so it accepts only numbers:

<ion-input formControlName="quantity"></ion-input>

I know this can be achieved with type=number but I'm restricted to using the type text for other reasons. Is it possible to do so with type text? And also how could I validate a min and max amount?

Answer 1

It can be done precisely in following way:

In your .ts file:

numericOnly(event): boolean {
   let pattern = /^([0-9])$/;
   let result = pattern.test(event.key);
   return result;
}

In your .html file:

<ion-input
        class="input"
        inputmode="numeric"
        type="number"
        (keypress)="numericOnly($event)"
      >
</ion-input>