Filament•9mo ago

How do I retrieve data from livewire component used in a resource form?

I'm using a custom livewire component as a form field, and that works as expected. However, I can't figure out how to get the data generated in that livewire component back out to the form to save in the resource. I've scoured the documentation, but no luck. Any advice?

11 Replies

awcodes•9mo ago

https://filamentphp.com/docs/3.x/forms/fields/custom#how-fields-work

Custom fields - Form Builder - Filament

CGM•9mo ago

Is a custom field just a Livewire component, or should the custom field have a <livewire:component /> added to it?

awcodes•9mo ago

Fields by default aren’t livewire components. But the main point is the custom field either needs to entangle its state with the form with is a livewire component either through alpine or lW directly. In this case with a parent lW component. Alpine might be easier to use though.

CGM•9mo ago

I'm going to give #[Modelable] a shot. Livewire and Filament never cease to amaze me! Thank you for the quick response!

awcodes•9mo ago

In all honesty I’ve never done a nested Lw component in a form. So I’m sure of the best way to do it, but that’s the underlying idea to make it work.

CGM•9mo ago

It worked! Added this to my Livewire Component:

    #[Modelable]
    public ?array $output = ['test'];

    #[Modelable]
    public ?array $output = ['test'];

And this to my field template:

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div wire:ignore>
        <livewire:custom-livewire-test-component wire:model="{{ $getStatePath() }}" />
    </div>

</x-dynamic-component>

<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>
    <div wire:ignore>
        <livewire:custom-livewire-test-component wire:model="{{ $getStatePath() }}" />
    </div>

</x-dynamic-component>

I'm a little unsure of the wire:ignore, but it seemed to be necessary to prevent the submit from killing the block during validation. It does successfully pass the value up though, and I think through props or reactive props I could get the form settings back down into the livewire component.

awcodes•9mo ago

Glad it worked. The wire:ignore is to keep it from dom diffing the wrapper. Does seem unusual though as it should be able to main a nested component. 🤷

cjOP•9mo ago

I'm more confused now. I don't think CGMaui's use case is like mine. I have a resource with a form and the form has a livewire component like so... Livewire::make(MyComponent::class) the associated blade is quite simple and looks something like this...

<div>
    <input wire:model="logo"/>
</div>

<div>
    <input wire:model="logo"/>
</div>

Now obviously there is more to it than this, but I'm trying to get a very basic component working. The component class right now, does almost nothing. It just has a couple of public fields to help me tie this together...

public ?MyModel $record = null;

 public $logo = '';

public ?MyModel $record = null;

 public $logo = '';

Now the only thing left to do is have it so that when the user submits the form, it grabs the text input and saves that to the 'logo' field of the given $record. Any idea how to pull that off?

awcodes•9mo ago

Real question is do you need a livewire component for this? But please start a new help question instead of posting on someone else’s.

cjOP•9mo ago

lol, this is my question! it got hijacked by the other poster. i don't need a livewire component for the example above. i need the livewire component for a much more complicated use. but the fact is i'm not sure how to get any data from my livewire component to be visible/saved by the filament form.
this is just a simple setup to help me understand.

awcodes•9mo ago

Sorry. Lol. So, the same still applies you need to entangle the state of the custom filed with the forms lW component.

Gaming

Programming

How do I retrieve data from livewire component used in a resource form?