Filament•3mo ago

Accessing a form component from another

Hello, I would like to know if it is possible to access another component from a component. For example, I'd like to modify the placeholder of a TextInput according to a record field selected in a Select. I tried something like this, I can access the other component, but getSelectedRecord is still null, as if the state didn't change

[
    Forms\Components\Select::make('object_id'),
    Forms\Components\TextInput::make('title')
        ->placeholder(fn(HasForms $livewire) => $livewire
            ->getForm('form')
            ?->getComponent('object_id')
            ->getSelectedRecord()
            ?->getAttribute('something')
]

[
    Forms\Components\Select::make('object_id'),
    Forms\Components\TextInput::make('title')
        ->placeholder(fn(HasForms $livewire) => $livewire
            ->getForm('form')
            ?->getComponent('object_id')
            ->getSelectedRecord()
            ?->getAttribute('something')
]

I've got this working, but I'd like if possible to avoid redoing an SQL request for nothing.

[
    Forms\Components\Select::make('object_id'),
    Forms\Components\TextInput::make('title')
        ->placeholder(fn(Forms\Get $get) => Object::find($get('object_id'))->something)
]

[
    Forms\Components\Select::make('object_id'),
    Forms\Components\TextInput::make('title')
        ->placeholder(fn(Forms\Get $get) => Object::find($get('object_id'))->something)
]

TY !

15 Replies

skashizadeh•3mo ago

you must use ->live() on field so after changing that field the screen reload with new state

Ashk•3mo ago

@skashizadeh both field are reactive (sorry I didn't put in my example), it changes nothing 😦

skashizadeh•3mo ago

may you put your actual code here?

Ashk•3mo ago

[
                    Forms\Components\Select::make('type_event_id')
                        ->label(__('labels.type'))
                        ->required()
                        ->reactive()
                        ->prefixIcon(fn (?string $state) => !is_null($state)
                            ? 'heroicon-m-stop'
                            : null
                        )
                        ->afterStateUpdated(fn(Forms\Components\Select $component) =>
                            $component
                                ->getLivewire()
                                ->getForm('form')
                                ->getComponent('title')
                                ->placeholder($component->getSelectedRecord()?->title)
                        )
                        ->prefixIconColor(function (Forms\Components\Select $component) {
                            $color = $component->getSelectedRecord()?->background_color;

                            return !is_null($color) ? Color::hex($color) : null;
                        })
                        ->relationship(
                            'typeEvent',
                            'name'
                        )
                        ->createOptionForm(TypeEventResource::formSchema())
                        ->createOptionAction(
                            fn (Forms\Components\Actions\Action $action) => $action
                                ->slideOver()
                                ->modalWidth('xl'),
                        ),
                    Forms\Components\TextInput::make('title')
                        ->label(__('labels.title'))
                        ->reactive(),
                ]

[
                    Forms\Components\Select::make('type_event_id')
                        ->label(__('labels.type'))
                        ->required()
                        ->reactive()
                        ->prefixIcon(fn (?string $state) => !is_null($state)
                            ? 'heroicon-m-stop'
                            : null
                        )
                        ->afterStateUpdated(fn(Forms\Components\Select $component) =>
                            $component
                                ->getLivewire()
                                ->getForm('form')
                                ->getComponent('title')
                                ->placeholder($component->getSelectedRecord()?->title)
                        )
                        ->prefixIconColor(function (Forms\Components\Select $component) {
                            $color = $component->getSelectedRecord()?->background_color;

                            return !is_null($color) ? Color::hex($color) : null;
                        })
                        ->relationship(
                            'typeEvent',
                            'name'
                        )
                        ->createOptionForm(TypeEventResource::formSchema())
                        ->createOptionAction(
                            fn (Forms\Components\Actions\Action $action) => $action
                                ->slideOver()
                                ->modalWidth('xl'),
                        ),
                    Forms\Components\TextInput::make('title')
                        ->label(__('labels.title'))
                        ->reactive(),
                ]

I tried many thing, here with afterStateUpdated in the Select

skashizadeh•3mo ago

what version of filament do you use?

Ashk•3mo ago

latest

skashizadeh•3mo ago

:/ change reactive to live. i did not see reactive anywhere

Ashk•3mo ago

It's the same thing 😛 (take a look)

    public function reactive(): static
    {
        $this->live();

        return $this;
    }

    public function reactive(): static
    {
        $this->live();

        return $this;
    }

Have you ever managed to mutate one component from another? (wihtout using Set)

skashizadeh•3mo ago

never needed, always used get / set to do the work

Ashk•3mo ago

Me too. but in this case I need to mutate a property (placeholder) 😢

skashizadeh•3mo ago

you want to get selected item and put its value as placeholder inside title?

Ashk•3mo ago

nop, I want to get the selectedItem (model) title and put its value as placeholder inside the title component

Forms\Components\TextInput::make('title')
                        ->label(__('labels.title'))
                        ->placeholder(function (Forms\Components\TextInput $component) {
                            $title = $component
                                ->getLivewire()
                                ->getForm('form')
                                ->getComponent('type_event_id')
                                ->getSelectedRecord()
                                ?->title;

                            $component->placeholder($title);
                        })
                        ->live(),

Forms\Components\TextInput::make('title')
                        ->label(__('labels.title'))
                        ->placeholder(function (Forms\Components\TextInput $component) {
                            $title = $component
                                ->getLivewire()
                                ->getForm('form')
                                ->getComponent('type_event_id')
                                ->getSelectedRecord()
                                ?->title;

                            $component->placeholder($title);
                        })
                        ->live(),

This not working too 😦 $component->getLivewire()->getForm('form')->getComponent('type_event_id') return the select component, but getSelectedRecord always return null

skashizadeh•3mo ago

TRY THIS [ Forms\Components\Select::make('type_event_id') ->label(('labels.type')) ->required() ->reactive() ->prefixIcon(fn (?string $state) => !is_null($state) ? 'heroicon-m-stop' : null ) ->afterStateUpdated(function ($state, $set, $get) { // Trigger a re-render $set('title', $get('title') . ''); $set('titlePlaceholder', "$state"); }) ->prefixIconColor(function (Forms\Components\Select $component) { $color = $component->getSelectedRecord()?->background_color; return !is_null($color) ? Color::hex($color) : null; }) ->relationship( 'typeEvent', 'name' ) ->createOptionForm(TypeEventResource::formSchema()) ->createOptionAction( fn (Forms\Components\Actions\Action $action) => $action ->slideOver() ->modalWidth('xl'), ), Forms\Components\TextInput::make('title') ->label(('labels.title')) ->placeholder(fn ($get) => $get('titlePlaceholder') ?? 'Default placeholder') ->reactive(), ]

Ashk•3mo ago

@skashizadeh it's a bit ugly but it's working

->afterStateUpdated(function (Forms\Set $set, Forms\Components\Select $component) {
    $set('titlePlaceholder', $component->getSelectedRecord()?->title);
})

->afterStateUpdated(function (Forms\Set $set, Forms\Components\Select $component) {
    $set('titlePlaceholder', $component->getSelectedRecord()?->title);
})

But instead adding shit in state, I would prefer to directly interact with the component...

skashizadeh•3mo ago

it looks nice

Gaming

Programming

Accessing a form component from another