Implement repeatable fields or collection

[rabol-teetrack]

A form group repeater where one can specify x number of inputs and then a 'add' and 'remove' button which then adds a group of input's.

Data will be stored in array

something like: https://kristijanhusak.github.io/laravel-form-builder/field/collection.html

[moskoweb]

It can be done using Jquery Repeatable or even with Pure JavaScript.

[inxilpro]

Yeah, I could see adding this at some point. It's not particularly high on the list, though. You can implement it pretty easily with Alpine and Aire. Just put the Aire::input() inside a x-for loop.

[npw1982]

I've been implementing this (or attempting to) in a json field, and have come across a bit of a problem with using the x-for loop with Aire. I have this working okay in normal inputs, using control names similar to the following:

<input type="text" x-bind:name="'fields[' + index + '][my_attribute]'"
                           class="form-control">

Where index is the index in the x-for loop, this renders the control with the name (and so on): name="fields[0][my_attribute]"

However when I try and do similar with the Aire input:

    Aire::input("fields[' + index + '][my_attribute]", 'my attribute question?')

Then it just treats it as a string and the index doesn't pick up the alpine variable (it just remains as the above string).

I can kind of semi circumvent this by doing something like:

        {{ Aire::input(null, __('seriousadverseevent.drug_name'))
            ->setAttribute('x-bind:name',"'fields[' + index + '][my_attribute]'")
            ->setAttribute('x-bind:id',"'fields[' + index + '][my_attribute]'")

Which does set the input id and name correctly, but then the auto binding doesn't work, and it all seems a little hacky. Am I missing something really obvious, and there is a nice way to escape the alpinejs index variable in the 'Aire::input(name,' parameter? @inxilpro ?

[npw1982]

I've been implementing this (or attempting to) in a json field, and have come across a bit of a problem with using the x-for loop with Aire. I have this working okay in normal inputs, using control names similar to the following:

<input type="text" x-bind:name="'fields[' + index + '][my_attribute]'"
                           class="form-control">

Where index is the index in the x-for loop, this renders the control with the name (and so on): name="fields[0][my_attribute]"

However when I try and do similar with the Aire input:

    Aire::input("fields[' + index + '][my_attribute]", 'my attribute question?')

Then it just treats it as a string and the index doesn't pick up the alpine variable (it just remains as the above string).

I can kind of semi circumvent this by doing something like:

        {{ Aire::input(null, __('seriousadverseevent.drug_name'))
            ->setAttribute('x-bind:name',"'fields[' + index + '][my_attribute]'")
            ->setAttribute('x-bind:id',"'fields[' + index + '][my_attribute]'")

Which does set the input id and name correctly, but then the auto binding doesn't work, and it all seems a little hacky. Am I missing something really obvious, and there is a nice way to escape the alpinejs index variable in the 'Aire::input(name,' parameter? @inxilpro ?

Just bumping this in case anyone can point out if i'm doing something obviously wrong with the input name when using them in an x-for template, would be great to be able to use the control normally for scaffolding purposes.