Filament•2y ago

How to set inputs "[name]" attribute to bahave like regular input field

Hi, I'm new to filament form builder, but I have search for this a lot, and didnt found anything. I want to use Filament FormBulder on parts of my page, but the problem is that the Components dont have name attributes and I cant do a global submit of both livewire components and normal blade components in my page. Is there a easy way (and how to do it) of setting the name attribute to each form(livewire) component to act like a normal blade/html component and when you hit a global save button to have the livewire's values available in the request global. Example with given form and what I expect to happen with mixed livewire/filament component and regular inputs:

<form action="">
    <h5 class="text-lg mb-2 text-gray-400">Title</h5>
    <div class="card mb-8">
        @include('admin.partials.form-input', [
            'type' => 'text',
            'name' => 'title',
            'label' => 'Title',
            'value' => old('title', $item->text->title),
        ])
    </div>
    <h5 class="text-lg mb-2 text-gray-400">PROMOTIONS</h5>
    <div class="mb-8">
        {{-- 
            (filament livewire component formBuilder) 
            it renders multiple inputs, but without NAME attributes 
            --}}
        @if ($item->exists)
            @livewire('admin.products.promotions-panel', ['product' => $item], key($item->id))
        @endif
    </div>
    <button type="submit">SUBMIT</button>
</form>

<form action="">
    <h5 class="text-lg mb-2 text-gray-400">Title</h5>
    <div class="card mb-8">
        @include('admin.partials.form-input', [
            'type' => 'text',
            'name' => 'title',
            'label' => 'Title',
            'value' => old('title', $item->text->title),
        ])
    </div>
    <h5 class="text-lg mb-2 text-gray-400">PROMOTIONS</h5>
    <div class="mb-8">
        {{-- 
            (filament livewire component formBuilder) 
            it renders multiple inputs, but without NAME attributes 
            --}}
        @if ($item->exists)
            @livewire('admin.products.promotions-panel', ['product' => $item], key($item->id))
        @endif
    </div>
    <button type="submit">SUBMIT</button>
</form>

Class ProductsController {
    public function update(Request $request, Product $product)
    {
        dd($request->all()); 
        // Doesnt include the livewire component inputs, bucause they dont have NAME attributes
    }
}

Class ProductsController {
    public function update(Request $request, Product $product)
    {
        dd($request->all()); 
        // Doesnt include the livewire component inputs, bucause they dont have NAME attributes
    }
}

6 Replies

Patrick Boivin•2y ago

Hi @voTkaPoweR, have you tried extraAttributes?

    TextInput::make('my_field')
        ->extraAttributes(['name' => 'my_field'])
        // ...

    TextInput::make('my_field')
        ->extraAttributes(['name' => 'my_field'])
        // ...

Dimitar Papazov DEVOP•2y ago

No, you are a saver! But there is a another problem, when I try to use a repeater and add new rows to it, how can I set the input's names dynamic like "promotions[0][price]" and "promotions[0][promo_price]" (Idea is the first index to auto increment) ? Also ->extraAttributes doesnt work on components like DateTimePicker, how would you approach this?

Patrick Boivin•2y ago

Interesting... I'm not sure what would be the best solution for repeaters. Let me do a quick test for DateTimePicker You might be able to use ->extraAlpineAttributes with DateTimePicker (not sure...)

Dimitar Papazov DEVOP•2y ago

You are a machine! Just left to figure out on those dunamic name increments for repeaters Someone, pls help out

David Vincent•2y ago

did you try ->statepath() on repeater element

Dan Harrin•2y ago

you arent using filament in a way that we designed it livewire should always be used to submit form fields and non-livewire fields should be converted to livewire fields and if you dont want to do that, please dont try and hack filament to do it in a way that we did not design it to please just take our design and implement your own blade components

Gaming

Programming

How to set inputs "[name]" attribute to bahave like regular input field