Problem of Reversed Number Formatting with Thousand Separators for BRL Currency

[appcarrareto]

I am using the example of reversed number format with thousand separators for the currency (R$) BRL decimal. However, when the (float) value is received via v-model, for example 29.9, the return is 2,99 instead of the expected 29,90. Of course, adding the zero at the end in 29.90 works correctly, but I would like to find a way to avoid having to do this.

<input
  v-maska
  data-maska="9.99#,##"
  data-maska-tokens="9:[0-9]:repeated"
  data-maska-reversed
>

[beholdr]

Reversed mask starts from the end, and always process two last digits as fraction.

You could use preProcess hook to pad 29.9 → 29.90 before masking, or use formatting with hooks and Intl.NumberFormat as in docs example (Money format: full via hooks)

[appcarrareto]

Following the example, I set it up for BRL currency, it worked correctly with the initial value, but when I clear the input, the return gets misconfigured and I can't type again, I am not knowing how to set it up.

const options = {
 preProcess: val => val.replace(/[R$,]/g, ''),
  postProcess: val => {
    if (!val) return ''

    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)

    return Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' })
      .formatToParts(val)
      .map(v => v.value)
      .join('')
      .slice(0, sub ? -sub : undefined)
  }
}

<input
  v-maska:[options]
  data-maska="0.99"
  data-maska-tokens="0:\d:multiple|9:\d:optional"
  data-maska-reversed
  value="29.9">

[beholdr]

I think you could try something like this

const options = {
  preProcess: val => val.includes('R$')
    ? val
      .replace(/[.]/g, ' ')
      .replace(/[,]/g, '.')
      .replace(/[^.0-9]/g, '')
    : val
      .replace(/[^.0-9]/g, ''),
  postProcess: val => {
    if (!val) return ''

    const sub = 3 - (val.includes('.') ? val.length - val.indexOf('.') : 0)

    return Intl.NumberFormat('pt-BR', {
      style: 'currency',
      currency: 'BRL'
    })
      .format(val)
      .slice(0, sub ? -sub : undefined)
  }
}

<input
  v-maska:[options]
  data-maska="0.99"
  data-maska-tokens="0:\d:multiple|9:\d:optional"
  value="29.9">