Filament•17mo ago

One field, multiple inputs

Is there a way to group multiple inputs into one alpine component and use it as one field? By group, I mean a list of inputs under each other that acts as one input. The resulting value is for one column in the database. Is there an existing example I can take a look at?

12 Replies

Jyrki•17mo ago

You can look at https://github.com/awcodes/filament-oembed, this is a class that returns a form group with multiple input fields

bwubsOP•17mo ago

From what I understand after a quick look, this is built on ->reactive() fields. For what it's worth, I'm already working on a solution. What I have so far is this: file moment-offset.blade.php

<div class="col-span-1" x-data="{
                        state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
                        count: 0,
                        unit: 'days',
                        relation: null,
                        translations: @json($getTranslations()),
                        init() {
                            $watch('relation', (value) => this.state = value+this.count+ ' ' + this.unit)
                            $watch('count', (value) => this.state = this.relation+value+ ' ' + this.unit)
                            $watch('unit', (value) => this.state = this.relation+this.count+ ' ' + value)
                        }

                    }">
    <div>
        <div class="grid grid-cols-1 filament-forms-component-container gap-6">
<x-dynamic-component>...</x-dynamic-component>
<x-dynamic-component>...</x-dynamic-component>
</div>
</div>
</div>

<div class="col-span-1" x-data="{
                        state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
                        count: 0,
                        unit: 'days',
                        relation: null,
                        translations: @json($getTranslations()),
                        init() {
                            $watch('relation', (value) => this.state = value+this.count+ ' ' + this.unit)
                            $watch('count', (value) => this.state = this.relation+value+ ' ' + this.unit)
                            $watch('unit', (value) => this.state = this.relation+this.count+ ' ' + value)
                        }

                    }">
    <div>
        <div class="grid grid-cols-1 filament-forms-component-container gap-6">
<x-dynamic-component>...</x-dynamic-component>
<x-dynamic-component>...</x-dynamic-component>
</div>
</div>
</div>

This combines two rows into one field, resulting in one state binding. I don't know if this is the "correct" way of doing this, but it seems to work so far

wyChoong•17mo ago

are you using standalone form builder or admin panel? if you don't need to display the combined value, you can just use 3 form fields, combine during save, then unset it but how are you going to handle editing the value

bwubsOP•17mo ago

The form needs to change dynamically based upon selected values. It's too complicated to do with reactive Here's a screenshot. For every selected radio, the row below needs to change.

bwubsOP•17mo ago

bwubsOP•17mo ago

I'm using standard form builder The reason i'm working with a custom field that contains multiple inputs is becasue of the editing. Now inside the custom field I can break the value apart in it's indiviual parts and fill the form fields accordingly The value that is stored is something like "+3 days" or "-4 weeks"

wyChoong•17mo ago

what kind of changes i think storing the value in associative array/object is better

bwubsOP•17mo ago

This value can later be given to CarbonInterval::fromString()

wyChoong•17mo ago

i can't read the language in your screenshot so couldn't get the context

bwubsOP•17mo ago

I understand. The context is sending a message at, before or after an already selected trigger Depending on the medium of the message, the second row needs to either include the time or not. When the message needs to be sent at the moment of the trigger, there's no need for a time offset. So the second row just needs to be "at [trigger]". In the end, it all boils down to either an offset in days, weeks or months or no offset at all

wyChoong•17mo ago

i think reactive is easy to achieve disable the second row based on the first field value but if your field is all working fine try forming the data in this way state = { count: "..", relation: "...", ....} so you can do things like

$watch('relation', (value) => this.state.relation = value)

$watch('relation', (value) => this.state.relation = value)

bwubsOP•17mo ago

Why? I'ts already being stored in a standard for temporal distance and the field contains a cast that turns the string into an object that represents the concept

Gaming

Programming

One field, multiple inputs