Filament•3mo ago

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)
            ]),
    ];
}

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);
}

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"
]

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"
]

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');
    }
}

<?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

5 Replies

ValcroOP•3mo ago

Bump. After some research, I can manage the form state by propagating events up to the resource, but feels a bit hacky to me so I ended doing the opposite by creating a livewire component and adding a form to it, that way the form state can be easily managed. But I'm still intrigued to know how you deal with the situation stated in the thread. Is it possible to manage the state directly within the component?

Saleh AL-Arami•3mo ago

When adding a column User Encryption is disabled, it does not work, and when logging in, a message appears that the password is incorrect.

ValcroOP•3mo ago

I think you answered in the wrong thread.

Solution

toeknee•3mo ago

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.

ValcroOP•3mo ago

Thanks for your time toeknee, that solves my question.

Gaming

Programming

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