Binding dynamicaly generated inputs

#1

HI, what is the best way to implement dynamic input fields with livewire ?

unknown
unknown928×196 15.4 KB

I’m trying to do something like that. What is the livewire approach ? This is a json field in my model with nested properties

My field would be like that :

[['metric' => '', 'operator' => '', 'value'] => 0],['metric' => '', 'operator' => '', 'value'] => 0]]
#2

Hi, here an example that works, you can adapt to your needs

First a publics array property for dynamics inputs
Backend
public $inputs=[];
public $inputsCount=1;

public function addInput()

{
$this->inputsCount++;

}
public function removeInput()
{
$this->inputsCount–;

}

<form wire:submit.prevent="save">
@for($e=1;$e<=$inputsCount;$e++)

    <div class="flex inline-flex items-center w-1/3">
        <input name="services" wire:model="inputs.{{$e}}.input1" type="input"    class=" w-1/3 border-2 border-gray-300 text-green-500">
        <input name="services" wire:model="inputs.{{$e}}.input2" type="input"    class=" w-1/3 border-2 border-gray-300 text-green-500">
        <input name="services" wire:model="inputs.{{$e}}.input3" type="input"    class=" w-1/3 border-2 border-gray-300  text-green-500">
    </div>
    <br />
@endfor
      <x-jet-button wire:click.prevent="addInput">add Input</x-jet-button>
<x-jet-button wire:click.prevent="removeInput">add Input</x-jet-button>
    <x-jet-button>Save</x-jet-button>
    </form>

// You will get an array with all inputs and values something like
array:3 [▼
1 => array:3 [▼
“input1” => “4”
“input2” => “ttt”
“input3” => “ddd”
]
2 => array:3 [▼
“input1” => “3”
“input2” => “aaa”
“input3” => “aaa”
]
3 => array:3 [▼
“input1” => “fff”
“input2” => “rrr”
“input3” => “tttt”
]
]
that should solve your problem

#3

No this doesn’t work. It’s adding the fields on the form but they are empty

#4

and there are some strange behaviour like the text in the inputs disapearing and reapearing

#5

Did you wrap around a div the form ?

the ouput that you see there is what I get in the save method,
Can you show what you did ?

#6

That’s an example of how to add dinamics forms elements and bind to livewire property, in this case I added inputs text, but as I said you can adapt, to your needs, that can be, select, checkbox, any form element.

#7

The code to add inputs is working, i have this probleme https://discord.com/channels/698229985755791471/698231501501890600/809056388793630800