Filament•13mo ago

filament form select native(false) does not run in livewire components

What i am triying to do : add filament select form "native false" on livewire component my issue: when submit button pressed, the required error showing, even though select has been selected. I attached the error in the image Code : Livewire blade view

<div>
    <form wire:submit="create">
        {{ $this->form }}
        <x-filament::button type="submit" class="mt-4">
            Save
            changes
        </x-filament::button>
    </form>
</div>

<div>
    <form wire:submit="create">
        {{ $this->form }}
        <x-filament::button type="submit" class="mt-4">
            Save
            changes
        </x-filament::button>
    </form>
</div>

Livewire Component

<?php

namespace App\Livewire;

use App\Models\Product;
use Livewire\Component;
use Filament\Forms\Form;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Section;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Tables\Concerns\InteractsWithTable;

class Tindakan extends Component implements HasForms, HasTable
{
    use InteractsWithTable, InteractsWithForms;

    public ?array $data = [];
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        Hidden::make('id'),
                        Select::make('status')
                            ->options([
                                'draft' => 'Draft',
                                'reviewing' => 'Reviewing',
                                'published' => 'Published',
                            ])
                            ->native(false)
                            ->required()
                    ])
            ])
            ->statePath('data');
    }
    public function render()
    {
        return view('livewire.tindakan');
    }

    public function create()
    {
        $data = $this->form->getState();
        Product::updateOrCreate(['id' => $data['id']], $data);
        $this->form->fill();
    }
}

<?php

namespace App\Livewire;

use App\Models\Product;
use Livewire\Component;
use Filament\Forms\Form;
use Filament\Forms\Components\Hidden;
use Filament\Forms\Components\Select;
use Filament\Forms\Components\Section;
use Filament\Forms\Contracts\HasForms;
use Filament\Tables\Contracts\HasTable;
use Filament\Forms\Concerns\InteractsWithForms;
use Filament\Tables\Concerns\InteractsWithTable;

class Tindakan extends Component implements HasForms, HasTable
{
    use InteractsWithTable, InteractsWithForms;

    public ?array $data = [];
    public function form(Form $form): Form
    {
        return $form
            ->schema([
                Section::make()
                    ->schema([
                        Hidden::make('id'),
                        Select::make('status')
                            ->options([
                                'draft' => 'Draft',
                                'reviewing' => 'Reviewing',
                                'published' => 'Published',
                            ])
                            ->native(false)
                            ->required()
                    ])
            ])
            ->statePath('data');
    }
    public function render()
    {
        return view('livewire.tindakan');
    }

    public function create()
    {
        $data = $this->form->getState();
        Product::updateOrCreate(['id' => $data['id']], $data);
        $this->form->fill();
    }
}

2 Replies

toeknee•13mo ago

public function mount() {
  $this->form->fill();
}

public function mount() {
  $this->form->fill();
}

I suspect it's not mounting until the submit stage where you clear it so fields are missing in the requirement.

athoulmuwafiqOP•13mo ago

thank you very much, its working perfectly 😀

Gaming

Programming

filament form select native(false) does not run in livewire components