F
Filament•3w ago
Marek

Filling data in custom forms on a custom page does not work

I am trying to have two forms on a custom page for a resource. Neither of forms is attached to the model. I am unable to populate the form with data. It just doesn't do anything. Here's what I've done: 
class TakePaymentPage extends Page
{
    // ...

    protected function getForms(): array
    {
        return [
            'manualPaymentForm',
            'stripePaymentForm',
        ];
    }

    public function manualPaymentForm(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Manual Payment')
                    ->columns(2)
                    ->schema([
                        TextInput::make('customer_name')
                            ->label('Customer'),
                        TextInput::make('customer_email')
                            ->label('Email'),
                        TextInput::make('reference'),
                    ]),
            ])
            ->fill([
                 'customer_name' => $this->record->customer->fullName(),
                 'customer_email' => $this->record->customer->email,
            ])
        ;
    }
}
class TakePaymentPage extends Page
{
    // ...

    protected function getForms(): array
    {
        return [
            'manualPaymentForm',
            'stripePaymentForm',
        ];
    }

    public function manualPaymentForm(Form $form): Form
    {
        return $form
            ->schema([
                Section::make('Manual Payment')
                    ->columns(2)
                    ->schema([
                        TextInput::make('customer_name')
                            ->label('Customer'),
                        TextInput::make('customer_email')
                            ->label('Email'),
                        TextInput::make('reference'),
                    ]),
            ])
            ->fill([
                 'customer_name' => $this->record->customer->fullName(),
                 'customer_email' => $this->record->customer->email,
            ])
        ;
    }
}
I've checked, when method is executed, $this->record is populated, if I do dd($form) in that method, it seems form has the details. But when page is rendered, the details are not populated. What am I doing wrong?
Solution:
Hmm. All that looks ok. But you’re missing the statePath() on each form. Make sure you haven’t missed any of the steps here: https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#using-multiple-forms
Adding a form to a Livewire component - Forms - Filament
Jump to solution
8 Replies
awcodes
awcodes•3w ago
Make sure you are calling the fill() method on both forms in mount()
Marek
MarekOP•3w ago
how can I do that in mount()? both manualPaymentForm() and stripePaymentForm() methods take Form object, how do I get them in mount() method? 🤔 For the record, this inside mount() method: 
        $this->manualPaymentForm->fill([
            'customer_name' => $this->record->customer->fullName(),
            'customer_email' => $this->record->customer->email,
        ]);
        $this->manualPaymentForm->fill([
            'customer_name' => $this->record->customer->fullName(),
            'customer_email' => $this->record->customer->email,
        ]);
...did not work.
Marek
MarekOP•3w ago
Marek
MarekOP•3w ago
Just used two forms instead of one...
awcodes
awcodes•3w ago
How are you outputting them in the blade file?
Marek
MarekOP•2w ago
<x-filament-panels::page>
    <form wire:submit.prevent="submitStripePayment">
        {{ $this->stripePaymentForm }}
        <x-filament::button type="submit" class="mt-3">Pay</x-filament::button>
    </form>

    <form wire:submit.prevent="submitManualPayment">
        {{ $this->manualPaymentForm }}
        <x-filament::button type="submit" class="mt-3">Confirm manual payment</x-filament::button>
    </form>
</x-filament-panels::page>
<x-filament-panels::page>
    <form wire:submit.prevent="submitStripePayment">
        {{ $this->stripePaymentForm }}
        <x-filament::button type="submit" class="mt-3">Pay</x-filament::button>
    </form>

    <form wire:submit.prevent="submitManualPayment">
        {{ $this->manualPaymentForm }}
        <x-filament::button type="submit" class="mt-3">Confirm manual payment</x-filament::button>
    </form>
</x-filament-panels::page>
Solution
awcodes
awcodes•2w ago
Hmm. All that looks ok. But you’re missing the statePath() on each form. Make sure you haven’t missed any of the steps here: https://filamentphp.com/docs/3.x/forms/adding-a-form-to-a-livewire-component#using-multiple-forms
Adding a form to a Livewire component - Forms - Filament
Marek
MarekOP•2w ago
Ok, figured this one out. Turns out that, I was missing properties for the forms, so: 
    public ?array $manualPayment = [];
    public ?array $stripePayment = [];
    public ?array $manualPayment = [];
    public ?array $stripePayment = [];
Then, the statePath() had to be set to match their names, once that was added, forms are prepopulated with data now đź‘Ť

Did you find this page helpful?