How to Volt Component with createOptionForm and a model

[kevin-ryser]

Package

Form builder

Package Version

V4.3.1

How can we help you?

Hi everyone,

I have a Volt Component with a form (to create a new record) and I'm trying to get createOptionForm to work on my select but I can't figure out how.

I've tried many things but either the modal doesn't open, either the modal opens and I get the error Call to a member function hasAttribute() on null which I'm guessing is because the record doesn't exists yet.

If I understand well I should assign the model to the select but I can't seem to understand how?
Am I in the right direction or doing it completely wrong?

Here is my code:

<?php

use Livewire\Volt\Component;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Components\Grid;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\TextInput;
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Contracts\HasSchemas;
use Filament\Actions\Concerns\InteractsWithActions;
use Filament\Actions\Contracts\HasActions;
use Filament\Schemas\Schema;
use Filament\Notifications\Notification;
use Filament\Actions\Action;
use function Laravel\Folio\{name, middleware};
use App\Models\{RecurringInvoice, Customer};

name('recurring-invoices.create');
middleware(['auth']);

new class extends Component implements HasSchemas, HasActions {
    use InteractsWithSchemas;
    use InteractsWithActions;

    public ?array $data = [];

    public function mount(): void
    {
        $activeCompany = auth()->user()->getActiveCompany();

        $this->form->fill([
            'company_id' => $activeCompany?->id,
            'user_id' => auth()->id(),
        ]);
    }

    public function form(Schema $schema): Schema
    {
        return $schema
            ->model(RecurringInvoice::class)
            ->components([
                Section::make('Recurring Invoice Details')
                    ->schema([
                        Select::make('customer_id')
                            ->label('Customer')
                            ->relationship(
                                name: 'customer',
                                titleAttribute: 'name',
                                modifyQueryUsing: fn ($query) => $query->where('company_id', auth()->user()->getActiveCompany()?->id)
                            )
                            ->searchable()
                            ->preload()
                            ->required()
                            ->createOptionForm([
                                Grid::make(2)
                                    ->schema([
                                        TextInput::make('name')
                                            ->required()
                                            ->maxLength(255),

                                        TextInput::make('email')
                                            ->email()
                                            ->maxLength(255),
                                    ])
                            ])
                            ->createOptionUsing(function (array $data) {
                                $data['company_id'] = auth()->user()->getActiveCompany()?->id;
                                $data['user_id'] = auth()->id();
                                $data['is_active'] = true;
                                return Customer::create($data)->getKey();
                            })
                    ])
            ])
            ->statePath('data');
    }

    public function create(): void
    {
        $data = $this->form->getState();
        $data['user_id'] = auth()->id();
        $data['company_id'] = auth()->user()->getActiveCompany()?->id;

        $recurringInvoice = RecurringInvoice::create($data);

        Notification::make()
            ->title('Recurring invoice created successfully')
            ->success()
            ->send();

        $this->redirect(route('recurring-invoices.edit', ['recurring_invoice' => $recurringInvoice]));
    }
}

?>

<x-layouts.app>
    @volt('recurring-invoices.create')
        <x-app.container>
            <div class="mb-6">
                <div class="flex items-center mb-4">
                    <a href="{{ route('recurring-invoices.index') }}" class="mr-4 text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                        </svg>
                    </a>
                    <x-app.heading
                        title="Create Recurring Invoice"
                        description="Set up automatic recurring invoices for your customers"
                        :border="false"
                    />
                </div>
            </div>

            <form wire:submit="create">
                <div class="space-y-6">
                    {{ $this->form }}

                    <div class="flex justify-end gap-4">
                        <a href="{{ route('recurring-invoices.index') }}" class="inline-flex items-center px-4 py-2 text-sm font-medium text-zinc-700 bg-white border border-zinc-300 rounded-lg shadow-sm hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-zinc-700 dark:text-zinc-200 dark:border-zinc-600 dark:hover:bg-zinc-600">
                            Cancel
                        </a>
                        <button type="submit" class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-lg shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                            Create Recurring Invoice
                        </button>
                    </div>
                </div>
            </form>
        </x-app.container>
    @endvolt
</x-layouts.app>

Thanks a lot!

Kevin

[iqbal-fadhil]

This error happens because the form is treated as if it already has a record, while this is actually a create form.
Removing the model binding fixes the null record issue when using createOptionForm.

[kevin-ryser]

Hi @iqbal-fadhil ,

Thanks for your reply! If I remove the model binding, then I get the error Call to a member function hasAttribute() on null. So I thought I would use options() instead of relationship(). Which works get rid of the error but then, the "plus" button doesn't open the modal at all.

->options(function () {
    $activeCompany = auth()->user()->getActiveCompany();
    if (!$activeCompany) {
        return [];
    }
    return Customer::where('company_id', $activeCompany->id)
        ->pluck('name', 'id');
})

[iqbal-fadhil]

It looks like the core issue is the model context.

When the parent form is treated as a create form, Filament may try to read attributes from a record that doesn’t exist yet, which leads to the hasAttribute() error.

What usually works in this case is:
• binding the form to the model class (not a record instance), and
• making sure createOptionForm has its own model context, instead of relying on the parent form record.

With that setup, the modal can open correctly and the null record error is avoided.

[kevin-ryser]

Hi @iqbal-fadhil , thanks for your reply. I was able to make it work in a standard Filament Resource so it must be something with the Volt Component or the DevDojo Wave's setup.

I'll look more into it, haven't found a solution yet...

Thanks!
Kevin

[leandrocfe]

Try to add <x-filament-actions::modals /> in the view