Home > Software engineering >  Why ionic ion-input type="number" does not allow comma in iOS even if number format is &qu
Why ionic ion-input type="number" does not allow comma in iOS even if number format is &qu

Time:11-17

My ionic app has a reactive form with an <ion-input type="numeric" inputmode="decimal" ...>. When i build the app in ios (Iphone 14, ios 16) the keyboard shows a comma , but when i input a value with comma, the form.value becomes null.

It only happens with number format setted to "1.234.567,89", with "1,234,567.89" it works but i need both.

Versions: Ionic 6 Angular 14

CodePudding user response:

I don't know anything about ionic or building mobile apps but it seems to me the problem is that a comma is a text character and a number input won't accept text characters. I tested with a HTML number input and this, too, does not accept commas. Can you please explain why you would need commas in a decimal input? Thanks!

EDIT: i did see there was a comma in the second number as well, but the first number's comma placement is invalid (commas need to have a multiple of 3 numbers behind them) and the second's is not.

CodePudding user response:

ion-input uses the browser's <input> tag to display (as seen here https://ionicframework.com/docs/api/input) because of that it has the same behavior.

Inputs of type number will use the number system of the browser locale (ex: will allow commas in countries that use commas and decimals in countries that use decimals).

If you need both you should use a text input and the ion-input pattern property with a regular expression to validate the field as shown here https://ionicframework.com/docs/api/input#pattern. The below code will allow decimal and comma delineated numbers

<ion-input type="text" pattern="(\d (?:[\.\,]\d ) )"/>
  • Related