Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

wikorl's avatar
Level 13

Filament form data to wire-model modal

I have a filament form with a select and a datapicker. On submit I want to pass the filled out data from the form to a wire-elements modal which I emit on form submit. But in the modal which pops up on form submit nothing is shown on {{ dd($data) }}. What do I do wrong?

This is what I have until now.

Filament Form component:

class Create extends Component implements HasForms {
use InteractsWithForms;

public $data;

public function mount($office = null): void 
{
    $this->office = $office;
    $this->form->fill([
        'office_id' => $this->office,
    ]);
}

protected function getFormSchema(): array
{
    return [
        Section::make('User (Admin)')
            ->schema([
                    Select::make('user_id')
                        ->label('User')
                        ->options(User::orderBy('name')->get()->pluck('name', 'id'))
                        ->columnSpan(2)
                        ->searchable()
                        ->default(Auth::id())
                        ->disablePlaceholderSelection()
                        ->required(),
        ])->columns([
            'sm' => 1,
            'xl' => 2])
        ->hidden(Auth::user()->admin != true),

        Section::make('Date')
            ->schema([
                    DatePicker::make('date')
                        ->label('Date')
                        ->minDate(now()->startOfDay()->addDay())
                        ->displayFormat('d.m.Y')
                        ->required()
                        ->columnSpan(2),
        ])->columns([
            'sm' => 1,
            'xl' => 2]),
}

protected function getFormStatePath(): string 
{
    return 'data';
}

public function render()
{
    return view('livewire.reservations.create');
}}

Form blade template:

<form wire:submit.prevent='$emit("openModal", "modal.reservations", {{ json_encode(["data" => $data]) }})'>
    {{ $this->form }}

    <x-button type="submit" class="mt-4">
        Show Details
    </x-button>
</form>

Modal component:

class Reservations extends ModalComponent {
public $data;

public function mount($data)
{
    $this->data = $data;
}

public function close()
{
    $this->closeModal();
}

public function render()
{
    return view('livewire.modal.reservations');
}}
0 likes
0 replies

Please or to participate in this conversation.