Laravel Livewire Dynamically Add More Input Fields Example

Hello Laravel devs Here, i will show you how to works laravel livewire add more dynamically input fields in Laravel. I will explain simply about laravel livewire add or remove dynamically input fields from start to finish. This tutorial will give you simple example of laravel livewire add more input fields example from scratch.

I want to share with you add remove dynamic textbox laravel livewire so that you can implement it in your website or any Laravel application. I will use only livewire/livewire package to do add more input fields dynamically.

If you don't know how to create Add more input fields in laravel using Livewire then you can learn this from this tutorial. So no more talk, Let' build our fresh laravel application for add more input fields dynamically with Laravel livewire without JavaScript.

Step 1 : Install Laravel 8

In this first step we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Create  Model & Migration

Now in this second step, we need create database migration for files table and also we will create model for files table.

php artisan make:migration create_contacts_table

database/migrations

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreateContactcTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('phone');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('contacts');
    }
}

Now run below command to create table in database.

php artisan migrate

Now in this step we will create Contact model by using following command:

php artisan make:model Contact

App/Models/Contact.php

namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class Contact extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'name', 'phone'
    ];
}

Read also : Laravel 7.x Dynamically Add More Input Fields using Handlebars Js

Step 3: Install Livewire

Now in this step, we will simply install livewire to our laravel 8 application using bellow command to create add more input field dynamically.

composer require livewire/livewire

Step 4: Create Component

Now here we will create livewire component using livewire own command. so run bellow command to create add more component in Laravel 8.

php artisan make:livewire contacts

Now they created fies on both path:

Now both file we have to update as bellow for our contact us form.

app/Http/Livewire/Contacts.php

namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Models\Contact;
use App\Http\Livewire\Field;
use Illuminate\Http\Request;
  
class Contacts extends Component
{
    public $contacts, $name, $phone, $contact_id;
    public $updateMode = false;
    public $inputs = [];
    public $i = 1;
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function add($i)
    {
        $i = $i + 1;
        $this->i = $i;
        array_push($this->inputs ,$i);
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function remove($i)
    {
        unset($this->inputs[$i]);
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        $this->contacts = Contact::all();
        return view('livewire.contacts');
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    private function resetInputFields(){
        $this->name = '';
        $this->phone = '';
    }
      
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store()
    {
        $validatedDate = $this->validate([
                'name.0' => 'required',
                'phone.0' => 'required',
                'name.*' => 'required',
                'phone.*' => 'required',
            ],
            [
                'name.0.required' => 'name field is required',
                'phone.0.required' => 'phone field is required',
                'name.*.required' => 'name field is required',
                'phone.*.required' => 'phone field is required',
            ]
        );
   
        foreach ($this->name as $key => $value) {
            Contact::create(['name' => $this->name[$key], 'phone' => $this->phone[$key]]);
        }
  
        $this->inputs = [];
   
        $this->resetInputFields();
   
        session()->flash('message', 'Contact Has Been Created Successfully.');
    }
}

resources/views/livewire/file-upload.blade.php

Step 5: Create Route

Now almost everything are set to go, But now we will create one route for calling our example, so let's add new route to web.php file as bellow:

routes/web.php

Route::get('contacts', function () {
    return view('default');
});

Step 6: Create View File

here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('contact-form'). so let's add it.

resources/views/default.blade.php

Now you can test it using bellow command:

php artisan serve

Visit this link to show view

Recommended : Dynamically Add or Remove Input Fields using JQuery in Laravel 7.x

Hope it can help you to learn new thing.