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 id="location_info_modal" tabindex="-1" aria-labelledby="location_info_modal" aria-hidden="true">
<div >
<form wire:submit.prevent="save" id="location_info_form"> {{-- action="/locations/{{ $location->id }}"> --}}
<div >
<div >
<div id="modal_header" >
<h5 >Edit Location Info</h5>
</div>
<button type="button" data-bs-dismiss="modal"
aria-label="btn-close"></button>
</div>
<div >
<div >
@csrf
<div >
<label for="location.name" >Location Name</label>
<input wire:model="location.name" type="text" id="name" placeholder="name" name="name" data-inputmask-regex="[A-Za-z0-9#.,''-() &] ">
@error('location.name') <span >{{ $message }}</span> @enderror
</div>
</div>
</div>
<div >
<button type="button" data-bs-dismiss="modal">Cancel</button>
<button type="submit" 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.
CodePudding user response：
You haven't set up the $rules correctly? Try updating from location.name to location_name and then ensuring that these match the name attributes on the inputs. Currently your input has name="name" which isn't correct.
It should be something like this??
public $location_name;
public $location_client_name;
public $location_email;
public $location_phone;
public $location_address;
public $location_city;
public $location_state;
public $location_zip_code;
public $location_website_url
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 then for the view update inputs to be: etc...
<label for="location_name" >Location Name</label>
<input wire:model="location_name" type="text" id="location_name" placeholder="name" name="location_name" data-inputmask-regex="[A-Za-z0-9#.,''-() &] ">
@error('location_name') <span >{{ $message }}</span> @enderror
CodePudding user response：
You need to add wire:click="save" to your submit button.
<button wire:click="save" type="submit" id="location_info_save">Save</button>
CodePudding user response：
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#.,''-() &] "