I'm trying to learn Laravel Livewire, and I have a form in a bootstrap modal I'm trying update via livewire. I'm just dd'ing the data after the validation step and it's not even registering that I'm sending any changes in the data. When I look in the network requests it's the same. It's like no form data aside from what was already populated in the form is sent. I've looked through the docs and I just can't figure out what I'm doing wrong. This should be the simplest possible thing to do in Livewire and it's just not working.
Here's my component:
class LocationInfo extends Component
{
public $states;
public Location $location;
protected $rules = [
'location.name' => ['required', 'string', 'max:150'],
'location.client_id' => ['required', 'integer', 'exists:clients,id'],
'location.email' => ['required', 'string', 'email', 'max:255'],
'location.phone' => 'required|string|min:12|max:12|regex:/^\d{3}\-\d{3}\-\d{4}$/|',
'location.address' => ['required', 'string', 'max:150'],
'location.city' => ['required', 'string', 'max:150'],
'location.state' => ['required', 'string', 'max:2'],
'location.zip_code' => ['required', 'string', 'max:5'],
'location.website_url' => ['required', 'url'],
];
public function mount($location)
{
$this->location = $location;
$this->states = USState::all();
}
public function render()
{
return view('livewire.location-info');
}
public function save()
{
$validatedData = $this->validate();
dd($validatedData);
$this->location->save($validatedData);
}
}
And here's my form (simplified for brevity):
<div class="modal fade" id="location_info_modal" tabindex="-1" aria-labelledby="location_info_modal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<form wire:submit.prevent="save" id="location_info_form"> {{-- class="" action="/locations/{{ $location->id }}"> --}}
<div class="modal-content">
<div class="modal-header d-flex justify-content-between">
<div id="modal_header" class="d-flex justify-content-start align-items-center">
<h5 class="modal-title pe-3">Edit Location Info</h5>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="btn-close"></button>
</div>
<div class="modal-body">
<div class="row">
@csrf
<div class="mb-3 col-md-8">
<label for="location.name" class="form-label">Location Name</label>
<input wire:model="location.name" type="text" class="form-control" id="name" placeholder="name" name="name" data-inputmask-regex="[A-Za-z0-9#.,''-() &]+">
@error('location.name') <span class="error">{{ $message }}</span> @enderror
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary save_btn" id="location_info_save">Save</button>
</div>
</div>
</form>
</div>
</div>
And here's where I'm calling the component:
<livewire:location-info :location="$location"/>
Please help me understand what's going on here. I've tried removing the Location type hint in the property declaration, but that's not changing anything.
the data that's displayed in the dd() is literally my model record without any changes. It's also reflecting all the other model fields that aren't currently even in the form, so something is not right.
I've tried adding Request $request as a parameter to the save() method signature, and then dumping the values there, and it's also just the model values, not the form submission.
Is it a bootstrap thing? I'm assuming the fact that I'm using bootstrap and in this instance a bootstrap modal, would have no bearing on Livewire, but I'm at a loss as to why this isn't working.
After trying basically everything I could think of, I finally tried to remove the mask I was using on the input field, which apparently was causing some conflict because as soon as I removed that, it works fine. Apparently Livewire doesn't play nice with javascript libraries.
After removing this from my input field, it works:
data-inputmask-regex="[A-Za-z0-9#.,''-() &]+"