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

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

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

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)

Livewire::make(AppointmentSlotField::class)

Livewire::make(AppointmentSlotField::class)

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

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

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

ValcroOP•9/13/24, 10:33 PM

Bump.

ValcroOP•9/15/24, 11:50 AM

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•9/15/24, 5:10 PM

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

SSaleh AL-Arami When adding a column User Encryption is disabled, it does not work, and when log...

ValcroOP•9/16/24, 7:27 AM

I think you answered in the wrong thread.

Solution

toeknee•9/16/24, 9:34 AM

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•9/16/24, 9:32 PM

Thanks for your time toeknee, that solves my question.

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

Similar Threads

Similar Threads

Similar Threads