Filament•13mo ago

How to add only edit form to a livewire component.

Hey there! I'm trying to build filament form inside livewire component but I want only edit form, when user click on edit action it should open edit form with data prefilled. I've tried installing it from documentation, but somehow its not working. Right now on click of edit button it's not opening any model, also the form field 'Reason' and submit button showing like attaching in screenshot. Is there anything I'm doing wrong.

class BookedSlots extends Component implements HasTable, HasForms
{
    use InteractsWithTable, InteractsWithForms;
    public ?array $data = [];
    public function mount()
    {
        $this->form->fill(Slot::with('event')->get()->toArray());
    }
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('reason'),
            ])
            ->statePath('data')
            ->model(Slot::class);
    }
    public function create(): void
    {
        $data = $this->form->getState();
        dd($data);
        $this->record->update($data);
    }
    public function table(Table $table): Table
    {
        return $table
            ->query(Slot::with('event')->where('user_id', Auth::id()))
            ->columns([
                TextColumn::make('event.name')->searchable()->sortable()->label('Event Name')
            ])
            ->actions([
                EditAction::make(),
            ]);
     }

class BookedSlots extends Component implements HasTable, HasForms
{
    use InteractsWithTable, InteractsWithForms;
    public ?array $data = [];
    public function mount()
    {
        $this->form->fill(Slot::with('event')->get()->toArray());
    }
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('reason'),
            ])
            ->statePath('data')
            ->model(Slot::class);
    }
    public function create(): void
    {
        $data = $this->form->getState();
        dd($data);
        $this->record->update($data);
    }
    public function table(Table $table): Table
    {
        return $table
            ->query(Slot::with('event')->where('user_id', Auth::id()))
            ->columns([
                TextColumn::make('event.name')->searchable()->sortable()->label('Event Name')
            ])
            ->actions([
                EditAction::make(),
            ]);
     }

blade component code.

<div class="p-6 text-gray-900 dark:text-gray-100">
    <form wire:submit="create">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>
    <x-filament-actions::modals />
    {{ $this->table }}
 </div>

<div class="p-6 text-gray-900 dark:text-gray-100">
    <form wire:submit="create">
        {{ $this->form }}

        <button type="submit">
            Submit
        </button>
    </form>
    <x-filament-actions::modals />
    {{ $this->table }}
 </div>

Thanks!

Solution:

https://filamentphp.com/docs/3.x/forms/advanced#saving-data-to-relationships

Advanced forms - Form Builder - Filament

Jump to solution

10 Replies

Dhaval KachaOP•13mo ago

@Dan Harrin ?

Dan Harrin•13mo ago

#✅┊rules im gonna answer just because im here already, but please dont @ me again you dont need to define or render the form you just pass the ->form() schema array to the EditAction and we will do the rest actions like this do not require any other setup

Dhaval KachaOP•13mo ago

sorry for the tag. so you mean i have to remove this method

 public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('reason'),
            ])
            ->statePath('data')
            ->model(Slot::class);
    }

 public function form(Form $form): Form
    {
        return $form
            ->schema([
                TextInput::make('reason'),
            ])
            ->statePath('data')
            ->model(Slot::class);
    }

and i have to do something like this?

->actions([
   EditAction::make()
     ->form([                                              TextInput::make('title')
          ->required()
          ->maxLength(255),
]),

->actions([
   EditAction::make()
     ->form([                                              TextInput::make('title')
          ->required()
          ->maxLength(255),
]),

Dan Harrin•13mo ago

yes you dont need mount() or anything

Dhaval KachaOP•13mo ago

alright! but sir how to load relationship inside this? i mean Im trying to do like this (event.location): and its not working.

EditAction::make()                  
  ->form([                                         
     TextInput::make('event.location')
       ->required()
       ->maxLength(255),
])

EditAction::make()                  
  ->form([                                         
     TextInput::make('event.location')
       ->required()
       ->maxLength(255),
])

I have relation like Event has Many Slots Im querying like this.

return $table
            ->query(Slot::with('event')->where('user_id', Auth::id()))
->columns([])

return $table
            ->query(Slot::with('event')->where('user_id', Auth::id()))
->columns([])

toeknee•13mo ago

You need a repeater / array field to load in relationships

EditAction::make()                  
  ->form([            
    Repeater::make('event')
        ->relationship('event', 'location')
        ->schema([                             
         TextInput::make('location')
           ->required()
           ->maxLength(255),
          ])
       ])
])

EditAction::make()                  
  ->form([            
    Repeater::make('event')
        ->relationship('event', 'location')
        ->schema([                             
         TextInput::make('location')
           ->required()
           ->maxLength(255),
          ])
       ])
])

or simialar

Dan Harrin•13mo ago

not if its a singular relationship are you trying to edit the name of the event, or are you trying to select a new event from a list

Dhaval KachaOP•13mo ago

Im trying to edit the name of event . Its textInput.

Solution

Dan Harrin•13mo ago

https://filamentphp.com/docs/3.x/forms/advanced#saving-data-to-relationships

Advanced forms - Form Builder - Filament

Dhaval KachaOP•13mo ago

Its working! grateful for your time.

Gaming

Programming

How to add only edit form to a livewire component.