Save edit form with two fields: Select & Livewire table component
Hi friends, I've a situation where a form contains a native field "Select" and a custom one (a table injected via Livewire component) and I can't save what I edit in the form containing the Livewire injected table (I don't get any kind of error. Just it doesn't work...). If I remove (or comment) the Livewire field containging the table, the form saving works correctly.
I followed this part of the documentation: https://filamentphp.com/docs/3.x/tables/adding-a-table-to-a-livewire-component#adding-the-table
I've these three files:
1. EventResource (binding Event model) -> I want to edit the form of this resource (containing a Livewire table injected of
2. ListPlayers (a Livewire component that implements HasForms, HasTable)
3. list-players.blade.php (a Livewire view file for the render)
Two models Event and Player, Player is related to the Event via event_id foreign key.
For more context I'm pasting some screenshots.
7 Replies
Im having the exact same problem today as well , cant understand why it wont save, remove the table absolutley fine.
weirdly though, if I have a modal box open up, then close the modal box the form then saves fine! .. weird
Analyzing the html output, seems that the "Save changes" button goes outside the tag <form></form> , meanwhile, removing/commenting the Livewire component row in the source code, the button goes inside the tag <form></form> and it works.
So I don't know if:
1. that is exactly the problem
2. if so, how can I keep always the button element inside the form element when I use the Livewire component in the form
I've to dig more.
That would make sense a suppose a workaround would be to use javascript to move the button back into the form .. but doesn't feel right
I can confirm, the exact same thing button is outside the <form></form> - I wonder if this a bug in filament
ive discovered a workaround, is to move the button to the header eg:
public function getFormActions(): array
{
return [];
}
protected function getHeaderActions(): array
{
return [
$this->getSaveFormAction()
->submit(null)
->action(fn() => $this->save()),
$this->getCancelFormAction(),
];
}
The reason this doesn't work is because you can't put tables inside a form. Tables have their own forms internally which inside a form will create nested forms which aren't allowed in HTML.
thank you soo much mate!
Thank you for the reply mate. I had this situation where I needed to have a list of elements (table rows) related to the main form information, where I had to bulk some actions. For example assosiate or disassociate a group of related data. (players related to the event, attaching/detaching them). Additionaly I had also to update the form data outside the table injected via Livewire. A very particular case that maybe could have been solved in a better way, but I couldn't image a different solution.
sounds like you need a relation manager if you're using panels
sure, sounds a viable option. I've to give a try, mabe it becomes a cleaner solution. Thank you