x-mask plugin: get unmasked value

[manhthang2504]

I am using the Mask plugin for formatting money value in a input field which is also a Livewire nested model.

@foreach($classes as $index => $class)
<input x-mask:dynamic="$money($input)" wire:model="classes.{{ $index }}.paying_amount">
@endif

This model have validation rule:

protected $rules = [
        
        'classes.*.paying_amount' => 'numeric',
      
    ];

And it always raise validation error because the formated amount (say: 1,000,000) is not numeric but text.

Is there any way to bind the unmasked value (i.e: 1000000, instead of 1,000,000), or at least how to get the unmasked value using Alpine and/or Mask plugin?

[tomgobich]

Came across the same issue using Adonis, and searching for a solution brought me to your question. Thought I'd drop my solution in case anyone else follows the same path as me.

<div x-data="{ 
  value: {{ value }} ?? '',
  displayValue: {{ value }} ?? '',
  demaskValue(value) {
    this.value = value.replaceAll('$', '').replaceAll(',', '')
  }
}" class="-mr-2">
  <input 
    type="text" 
    x-mask:dynamic="'$' + $money($input)"
    :value="displayValue"
    @input="demaskValue($el.value)"
    placeholder="$0.00"
  />
  <input 
    type="hidden" 
    name="{{ name }}"
    x-model="value"
  />
  
  {{-- for testing purposes --}}
  <span x-text="value"></span>
</div>

Essentially if you use two inputs, one for the unmasked value and one for the displayed value, you can remove all masked characters on input and use the hidden unmasked value to post out with your form submission.

Here's the result with the unmasked value displayed in the span and the masked value displayed in the text input

[AndreaB93]

Hello, i would use your solution because i've the same issue with mask plugin of alpine but i've get this error:

Could you help me about it? That is my first time using alpine.

Thanks a lot!

[ekwoka]

Your templating isn't being swapped out. That makes it not an Alpine issue. But whatever your templating is.

[rustomenglish]

On the PHP side, using prepareForValidation in either the Livewire Form or Component works for me:

    protected function prepareForValidation($attributes)
    {
        // Unmask values
        $attributes['amount'] = (float) str_replace(',', '', $this->amount);

        return $attributes;
    }

Then in a save function:

    public function save()
    {
        $data = $this->validate();
        //...

[poldixd]

But then it changes the value that is sent to the frontend again, doesn't it?

[ekwoka]

I believe a current PR would expose it as an export from the mask plugin package where you could pass the input and the mask and it would give back the result with full mask removed.

Of note, for masks, like money that would do 1,000.49 it would give back 100049 which might be good or not...

[cwyrwas]

Currently dealing with this right now. I can't seem to find much information, but I came across this discussion. Was a native solution ever implemented for this? I'm trying to use x-model on a currency input, but I need the unmasked float value for calculations.

[ekwoka]

You can just use a getter that gives you the number.

[cwyrwas]

That makes sense. I ultimately ended up just going that route. Thanks again!