Level 1
No one? :'(
Apr 7, 2022
6
Level 1
Livewire + Inputmask
Hi everyone! I'm not able to make Inputmask (RobinHerbots/Inputmask) working with livewire. Please I need help.
This is what I have inside app.js:
var Inputmask = require('inputmask');
The code above is working when I use input mask in "normal" blade pages.
This is my livewire blade page:
<div>
<form wire:submit.prevent="check">
<div class="mb-3">
<div class="col-12 col-md-6 col-lg-3">
<label for="code" class="form-label">{{ __('Customer code') }}</label>
<input type="text" class="form-control @error('code') is-invalid @enderror"
id="code" wire:model="code">
@error('code')
<small class="text-danger">{{ $message }}</small>
@enderror
</div>
@push('scripts')
<script>
Inputmask({
regex: "^\d{3}\.\d{3}\.\d{3}$",
placeholder: "_",
showMaskFocus: true,
showMaskOnHover: false,
clearIncomplete: true
}).mask(document.getElementById("code"));
</script>
@endpush
</div>
<button class="btn btn-primary">{{ __('Check') }}</button>
</form>
</div>
In the php part of livewire component I have the "check" function:
public function check(): void
{
dd($this->code);
}
The mask seems to work correctly on the page, but if I click on the "Check" button without Inputmask, I see the code; if I do this with Inputmask, the value is always "null".
I the developer console of my browser (Chrome) I see this error:
Uncaught TypeError: Cannot read properties of null (reading 'toString')
at c (inputmask.js?6e96:1559:1)
at HTMLInputElement.c (inputmask.js?6e96:2181:1)
at Object.setInputValue (dom.js:179:16)
at Object.setInputValueFromModel (dom.js:150:14)
at node_initializer.js:31:25
at Array.forEach (<anonymous>)
at Object.initialize (node_initializer.js:15:34)
at index.js:92:35
at index.js:525:17
at walk (walk.js:5:9)
Can you help me? Thanks!
Level 1
@Pandax I also faced such problem. I suffered for a long time but solved the problem through events My iinput from livewire component
<input wire:model.lazy="phone" id="phone">
my js
var phone = $('#phone, #phone-edit');
phone.inputmask('38 (999) 999 - 99 - 99');
phone.change((e) => {
var phone = e.target.value.replace(new RegExp(/[\s-()/\]/g), '');
if(phone.length === 12){
livewire.emit('SetFieldFromInputMask', {phone:phone});
}
});
and in component i set from event
protected function getListeners(): array
{
return [
'SetFieldFromInputMask' => 'setFromInputMask',
];
}
public function setFromInputMask($data)
{
$field = array_key_first($data);
$this->customer->$field = $data[$field];
}
Level 1
@Pandax I had the same problem and I solved it in the following way: My input from livewire component
<input type="text" id="ip" wire:model.defer="ip" class="form-control ip">
In my JS File
let ipv4 = $('.ip');
ipv4.inputmask({
alias: "ip",
greedy: false,
});
ipv4.keyup((e) => {
let ip = e.target.value;
@this.set('ip', ip, true); //set value of input in the the variable '$ip' from livewire component the true value is the equivalent a "wire:model.defer"
});
It is important that the component defines the variable public $ip=""; This avoids the error for a null value
Level 21
I suspect that it would have something to do with Inputmask taking over the input field and rendering wire:model useless. I'd check the documentation to see if there is an event you can listen for and then update code accordingly.
Edit Check oncomplete https://github.com/RobinHerbots/Inputmask#oncomplete
Level 1
Well in Laravel Livewire3 input masking is too easy
Step1: (INSTALL THIS PACKAGE) composer require hallindavid/manny
Step2: (Create a function under your mount function or any where on top)
public function updated($field) { if ($field == 'cnic') { $this->cnic = Manny::mask($this->cnic, "11111-1111111-1"); } }
For Livewire Blade it would be like this
use wire:model.live or wire:model.lazy choice is yours
1 like
Level 7
try this.
add
onchange="@this.set('field_name', this.value);" to the input
Please or to participate in this conversation.