Formatting of currency input breaks for 'de-DE'
Komald opened this issue · comments
Discussed in #193
Originally posted by Komald October 12, 2023
Using the reference from the example of Money format via hooks,
I have added code like below:
HTML:
<input v-maska:[maskOptions] data-maska="0.99" data-maska-tokens="0:\d:multiple|9:\d:optional" v-model="tax_rate"
/>
maskOptions = {
preProcess: val => val.replace(/[$,]/g, ''),
postProcess: val => {
if (!val) return '';
console.log(val);
const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0);
return Intl.NumberFormat(localNumberformat, {
style: 'currency',
currency: localCurrency,
}).format(val)
.slice(0, sub ? -sub : undefined);
},
};
where localNumberformat can be 'de-DE' or 'en-US' and localCurrency can be USD, EUR
Above code works fine for en-US and USD, but when switched to de-DE, the input field starts appending 0 after every digit.
Stackblitz link for reproducing the issue:
https://stackblitz.com/edit/nuxt-starter-xcr8ue?file=app.vue
Try to enter 34367.85 value in the text field.
Attaching the screen-rec below.
maska-de-input-err.mp4
This is not a bug, you just need to adapt your code to your currency format.
Example from docs is for USD currency, that's why it has line val.replace(/[$,]/g, '')
for example. EUR currency don't have $
symbol, it has €
symbol. You can take USD example for reference and adapt it to your case.
But why it's attaching 0 after every digit? Is that not an issue?
Sorry I am not very good at regex.
Additionally this is the case for all the non-en currency formats.
I tried with
'ru-RU', currency: RUB
'ja-JP', currency: JPY
'ar-EG', currency: AED
for all of these, input field went haywire.
Can you please help?