TheLazy.Dev
Portfolio GitHub

Blog

laravel |livewire |php |programming

How to create dynamic input fields with Laravel Livewire.

jringeisen

Jonathon Ringeisen

Posted on November 27, 2021

How to create dynamic input fields with Laravel Livewire.

Hey there 👋, I recently ran into a situation where I needed to build a dynamic input field and thought I would share how I did it.

This how-to is going to cover how to generate an input field on demand, simply by clicking a link you'll be able to add an input field or remove the field. I'm also going to cover how to implement the validation for the dynamic inputs. So...lets get started.

I am going to assume that you already have your Laravel Livewire project setup.

Getting Started

The first thing you're going to want to do is create your Livewire component. You can do this by using the following command:

php artisan livewire:make DyanmicInputs
Enter fullscreen mode Exit fullscreen mode

This will create your DynamicInputs class and your dynamic-inputs blade template.

Building the class

Now that we have our files generated, let's go to the DynamicInputs class and start building this out.

The first method and property we want to add are.

// DynamicInputs.php

public Collection $inputs;

public function addInput()
{
    $this->inputs->push(['email' => '']);
}

// Taking advantage of Laravel Collections, we are simply 
// pushing an array with a key of email and an empty string 
// value to the inputs collection.

// This method will be called when we click the add input link.
Enter fullscreen mode Exit fullscreen mode

The next method we want to add will remove the input from the inputs collection.

// DynamicInputs.php

public function removeInput($key)
{
    $this->inputs->pull($key);
}
// Again, I'm using Laravel Collections here and I am using
// the pull method to remove the array with the specified key.

// This will be called when we click the remove input link.
Enter fullscreen mode Exit fullscreen mode

Next we want to add the mount method so that we can load our initial field on load.

//DynamicInputs.php

public function mount()
{
    $this->fill([
        'inputs' => collect([['email' => '']]),
    ]);
}

// I am using the Livewire fill method to populate the inputs
// collection when the page loads. This is how we display our
// initial input field.
Enter fullscreen mode Exit fullscreen mode

Creating the blade template

Now that we have most of the class done, let's dig into the blade template. I'm going to post the entire template below then we will go over whats going on.

<div class="max-w-xl w-full">
    @foreach($inputs as $key => $input)
    <div class="mt-12">
        <div class="w-full">
            <label for="input_{{$key}}_email" class="sr-only">Email</label>
            <input type="email" id="input_{{$key}}_email" wire:model.defer="inputs.{{$key}}.email" class="shadow-sm border-0 focus:outline-none p-3 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" autocomplete="off">
            @error('inputs.'.$key.'.email') <span class="text-xs text-red-600">{{ $message }}</span> @enderror
        </div>
        @if($key > 0)
        <div wire:click="removeInput({{$key}})" class="flex items-center justify-end text-red-600 text-sm w-full cursor-pointer">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
            <p>Remove Input</p>
        </div>
        @endif
    </div>
    @endforeach

    <div wire:click="addInput" class="flex items-center justify-center text-blue-600 text-sm py-4 w-full cursor-pointer">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
        <p class="ml-2">Add New Input</p>
    </div>

    <div class="w-full flex justify-end mt-12">
        <button wire:click="submit" class="px-3 py-1 bg-blue-600 text-white rounded-lg">Submit</button>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
// dynamic-inputs.blade.php

@foreach($inputs as $key => $input)

// This is a simple foreach loop that we use to iterate
// through the inputs collection. The $key is important!
Enter fullscreen mode Exit fullscreen mode 
// dynamic-inputs.blade.php

<label for="input_{{$key}}_email" class="sr-only">Email</label>
<input type="email" id="input_{{$key}}_email" wire:model.defer="inputs.{{$key}}.email" class="shadow-sm border-0 focus:outline-none p-3 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" autocomplete="off">

// When creating dynamic input fields, make sure your for
// attribute and id attribute are dynamic. I accomplish
// this by using the $key value with those attributes.

// Also, for wire:model you want to use inputs.{{$key}}.email
// as your value here. Inputs being the name of the collection
// $key being the dynamic value, and email being the
// collection key.
Enter fullscreen mode Exit fullscreen mode 
// dynamic-inputs.blade.php

@if($key > 0)
    <div wire:click="removeInput({{$key}})" class="flex items-center justify-end text-red-600 text-sm w-full cursor-pointer">
        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
        <p>Remove Input</p>
    </div>
@endif

// We want to hide the remove input link on the first field.
// To do this, simply add an if statement that checks to see
// if the $key is > 0. If it is, then show it else don't.
Enter fullscreen mode Exit fullscreen mode 
// dynamic-inputs.blade.php

<div wire:click="addInput" class="flex items-center justify-center text-blue-600 text-sm py-4 w-full cursor-pointer">
    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></path></svg>
    <p class="ml-2">Add New Input</p>
</div>

// And lastly we add the link to add the new input. Once
// You've add this you can go ahead and click it and you
// will be creating dynamic input fields.
Enter fullscreen mode Exit fullscreen mode

Let's go over how to implement validation for this.

To implement validation into this, you'll need to add the following code snippets.

// DynamicInputs.php

protected $rules = [
    'inputs.*.email' => 'required',
];

protected $messages = [
    'inputs.*.email.required' => 'This email field is required.',
];

public function submit()
{
    $this->validate();
}

// You'll notice we're using . notation to set our validation
// rules.
Enter fullscreen mode Exit fullscreen mode

Now let's add the validation to the front end. Below your input you'll want to add the following code.

// dynamic-inputs.blade.php

@error('inputs.'.$key.'.email') <span class="text-xs text-red-600">{{ $message }}</span> @enderror

// Notice the $key variable, you have to set this dynamically
// to make sure you catch the correct error for the correct
// input.
Enter fullscreen mode Exit fullscreen mode

I created a sandbox version of this here

I hope you enjoyed this article, feel free to comment below if you know of a way to improve this.

💖 💪 🙅 🚩
jringeisen
Jonathon Ringeisen

Posted on November 27, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

How to create dynamic input fields with Laravel Livewire.
laravel How to create dynamic input fields with Laravel Livewire.

November 27, 2021