Filament 3 page with custom livewire forms modals
I created a Filament page which I understand it is a Livewire component. In it I have buttons that activate forms in modals each form with their own Livewire custom component using:
https://filamentphp.com/docs/3.x/support/blade-components/modal
What works:
1. The form shows in modal
2. The data is saved
My problems are:
1. Although I declare the Livewire component for the forms as extends Page implements HasForms and I declare use InteractsWithForms, the form shows, saves but does not take into account validation at all. Considering it is a custom Livewire component I should validate it manually from the Livewire component?
2. When I save the data I cannot make the parent page refresh. How can I emit an event as when I do $this->emit I receive an error saying Method MyClass::emit does not exist.
Thank you in advance.
7 Replies
1. You need to call getState to cause the validation.
2. $this->refresh() I believe or similar
Thank you for your prompt reply.
getState worked like a charm: $this->form->getState() before the create query.
The refresh is not working. I am still searching for something similar.
Just a quick note I am using Livewire 3 and I just realized that in Livewire 3 emit has been replaced by dispatch. Now the last issue is how to close the modal and re-render the parent.
It could be refreshForm()
or $this->form->reset()
Thank you very much for your support. Unfortunately none worked but I believe I found something useful: In the livewire modal in the create function I create the record in the database and I do 2 things:
1. I dispatch an event that in the parent Filament page will trigger a method that refreshes the base model ID which reloads the content and shows the new entry
2. Before the create function closes in the child I issue $this->form->fill(); which should reset the form
Now I have a new issue: so I have multiple buttons each opening the same livewire component form and after one modal is closed I get a JS error "livewire.js?id=f121a5df:4351 Uncaught Snapshot missing on Livewire component with id: XXXXXXXXXXXXXXX". The XXXXXXXXXX is the wire:id for each button (which I believe should be different) and this causes all the buttons in the page to stop working.
So I see the buttons, I click on one, the modal shows up, the form is displayed with validation, I fill in the form click save, the modal closes but because of the JS error above I cannot click on another button.
Is there any tutorial on custom livewire components using multiple modals?
Did you place fill in the mount method?
Yes. In the mount method I added $this->form->fill(); request.