Dynamic components with form fields / wire:model

Is it possible?

I would like to display a group of components based on previous user selections, with the dynamic components having form fields accessible to Livewire.

It might be easier to show in code:

if(CONDITION) {
      $this->sets[] = 'COMPONENT';
}
...

@foreach($this->sets as $set)
      <x-dynamic-component :component="$set" />
@endforeach

Any form fields would be nested within an Livewire property array.

#[Validate('')]
public array $formgroup = [];

<input type="text" name="formgroup.field1" wire:model="formgroup.field1" />
<input type="text" name="formgroup.field2" wire:model="formgroup.field2" />
...

I had hoped this would then be accessible in the formgroup array after submission, but I cannot get data back from the form inputs.

I have had some success with:

<form wire:submit="submit(Object.fromEntries(new FormData($event.target)))">

But this does not seem to work nicely with all form field types and it would be nice to retain Livewire validation etc.

Any suggestions would be awesome.

LaryAI

1 year ago

Level 58

To achieve dynamic components with form fields that are accessible to Livewire, you can follow these steps:

Dynamic Component Rendering: Use Livewire's ability to render components dynamically. You can use the @foreach directive to loop through your components and render them.
Wire Model Binding: Ensure that your form fields are correctly bound to Livewire properties using wire:model.
Form Submission: Use Livewire's form submission capabilities to handle the form data.

Here's a step-by-step solution:

Livewire Component

Define the Livewire Component: Create a Livewire component with a property to hold your dynamic components and form data.

use Livewire\Component;

class DynamicForm extends Component
{
    public array $sets = [];
    public array $formgroup = [];

    public function mount()
    {
        // Example condition to add components
        if (/* CONDITION */) {
            $this->sets[] = 'component-name';
        }
    }

    public function submit()
    {
        // Handle form submission
        $this->validate([
            'formgroup.field1' => 'required|string',
            'formgroup.field2' => 'required|string',
        ]);

        // Process the form data
        dd($this->formgroup);
    }

    public function render()
    {
        return view('livewire.dynamic-form');
    }
}

Blade View: Create a Blade view for your Livewire component.

<form wire:submit.prevent="submit">
    @foreach($sets as $set)
        <x-dynamic-component :component="$set" :formgroup="$formgroup" />
    @endforeach

    <button type="submit">Submit</button>
</form>

Dynamic Component

Create a Dynamic Component: Define a Blade component that will be used dynamically.

<!-- resources/views/components/dynamic-component.blade.php -->
<div>
    <input type="text" wire:model="formgroup.field1" placeholder="Field 1">
    <input type="text" wire:model="formgroup.field2" placeholder="Field 2">
</div>

Explanation

Dynamic Components: The @foreach loop iterates over the $sets array, rendering each component dynamically.
Wire Model: The wire:model directive binds the input fields to the formgroup array in the Livewire component.
Form Submission: The wire:submit.prevent="submit" directive prevents the default form submission and calls the submit method in the Livewire component.

Validation

Validation: The submit method includes validation rules for the form fields. Adjust these rules based on your requirements.

This setup allows you to dynamically render components with form fields that are bound to Livewire properties, enabling you to handle form submissions and validations effectively.