CODEWITHSUNDEEP
javascriptiosangularionic-frameworkangular-reactive-forms
Martin
Martin

Reputation: 68

Why ionic ion-input type="number" does not allow comma in iOS even if number format is "1.234.567,89"?

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

Upvotes: 0

Views: 1912

Answers (1)

Evan Tobin
Evan Tobin

Reputation: 76

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+)+)"/>

Upvotes: 1

Related Questions