Formatear dinero usando AlpineJS
Alpine nos provee de una función $money que nos permite formatear números de forma sencilla y rápida.
Como ya vimos en este artículo sobre máscaras en AlpineJS, es posible aplicar máscaras a textos de forma muy sencilla utilizando x-mask.
Otra de las posibilidades que nos proporciona Alpine es la de utilizar máscaras dinámicas, que cambien según el input del usuario. Por ejemplo:
<input x-mask:dynamic="
$input.startsWith('34') || $input.startsWith('37')
? '9999 999999 99999' : '9999 9999 9999 9999'
">En este caso, dependiendo del comienzo de la string que escribamos en el input, la máscara será una u otra. Sin embargo, cuando tratamos con dinero la cosa se pone más complicada:
- El número de caracteres es variable
- Puede haber decimales o no
- Hay que ir cambiando los separadores de miles a medida que se escribe
Por ello, Alpine ya ha creado una función $money que podemos usar para formatear cantidades:
<input x-mask:dynamic="$money($input)">
Además, si queremos cambiar el separador de miles por un "." (y los decimales por una coma), podemos pasarle un segundo parámetro a la función:
<input x-mask:dynamic="$money($input, ',')">¡Y ya estaría todo! Gracias a esta pequeña función de Alpine formatear números es bastante sencillo.