FilamentF
Filament•16mo ago
Valcro

Inserting livewire component into a form, how to manage state?

Hello, following this section of the documentation: https://filamentphp.com/docs/3.x/forms/advanced#inserting-livewire-components-into-a-form

I have a wizard form with 3 steps to create a record of a resource. 

public function getSteps(): array
{
    return [
        Step::make('Step A')
            ->schema([
                TextInput::make('stepa')
            ]),
        Step::make('Step B')
            ->schema([
                TextInput::make('stepb')
            ]),
        Step::make('Step C')
            ->schema([
                Livewire::make(AppointmentSlotField::class)
            ]),
    ];
}


The first two steps uses filament TextInput fields, the third step uses a livewire component.

When creating the record, the first two fields are automatically synced in the form state so when I create the record and inspect the data:

protected function mutateFormDataBeforeCreate(array $data): array
{
    dd($data);
}

I have the values of the TextInput fields correctly:

array:2 [▼ // app\Filament\Resources\AppointmentResource\Pages\CreateAppointment.php:24
  "stepa" => "1"
  "stepb" => "1"
]


My question is: How can I access the state of the form fields within the livewire component Livewire::make(AppointmentSlotField::class) and set new values to the form?

So when creating the record, I expect to have this output:

array:3 [▼ // app\Filament\Resources\AppointmentResource\Pages\CreateAppointment.php:24
  "stepa" => "1"
  "stepb" => "1"
  "stepc" => "1"
]


This is the livewire component:

<?php

namespace App\Livewire;

use Illuminate\Contracts\View\View;
use Livewire\Component;

class AppointmentSlotField extends Component
{
    public function render(): View
    {
        return view('livewire.appointment-slot-field');
    }
}
Advanced forms - Form Builder - Filament
Solution
You can't do that, you would need to create a Filament Field component, opposed to a custom livewire component which does what you component does, just extends field opposed to component.
Jump to solution
Was this page helpful?