Using laravel livewire add or remove dynamically input fields example tutorial, we are going to share step by step on how to add remove multiple input fields in laravel 9 app using livewire package and store to database.
Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel. You can use to create simple add remove dynamic textbox example using laravel livewire with laravel 6, laravel 7, laravel 8 and laravel 9 version.
Laravel Livewire Add or Remove Dynamically Input Fields
Follow the following steps to create dynamically add or remove input fields with livewire in laravel app:
- Step 1: Install Laravel App
- Step 2: Connect App to Database
- Step 3: Generate Model & Migration
- Step 4: Install Livewire Package
- Step 5: Build Livewire Component
- Step 6: Make Routes
- Step 7: Create Blade File
- Step 8: Run Development Server
Step 1: Install Laravel App
First create new laravel 9 application adding the following command in terminal.
composer create-project --prefer-dist laravel/laravel laravel-livewire
Now Go into the app:
laravel-livewire
Step 2: Connect App to Database
Open the .env file and add your database credentials such as database name, username equally important password:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db passwordStep 3: Create Migration and Model
Next step, we need to execute the following command on terminal to generate model, migration file using the following command:
php artisan make:model Employee -mAdd code in database/migrations/create_employees_table.php:
public function up()
{
Schema::create('employees', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email');
$table->timestamps();
});
}Next, open command prompt and execute the following command to create the table into database:
php artisan migratePlace the below code in app/Models/Employee.php file:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Employee extends Model
{
use HasFactory;
protected $guarded = [];
}Step 4: Install Livewire Package
Use the composer command to install livewire library in laravel app:
In this step, we need to install livewire package to laravel project using the following command:
composer require livewire/livewireStep 5: Build Livewire Component
In this step, create the livewire components for creating a livewire add or remove field component using the following command in laravel. So Open cmd and execute the following command:
php artisan make:livewire employeesThis command will create the following components on the following path:
app/Http/Livewire/Employees.php
resources/views/livewire/employees.blade.phpNow, Navigate to app/Http/Livewire folder and open Employees.php file then add the following code into this file:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Employee;
use App\Http\Livewire\Field;
use Illuminate\Http\Request;
class Employees extends Component
{
public $employees, $name, $email, $employee_id;
public $updateMode = false;
public $inputs = [];
public $i = 1;
public function add($i)
{
$i = $i + 1;
$this->i = $i;
array_push($this->inputs ,$i);
}
public function remove($i)
{
unset($this->inputs[$i]);
}
public function render()
{
$this->employees = Employee::all();
return view('livewire.employees');
}
private function resetInputFields(){
$this->name = '';
$this->email = '';
}
public function store()
{
$validatedDate = $this->validate([
'name.0' => 'required',
'email.0' => 'required',
'name.*' => 'required',
'email.*' => 'required|email',
],
[
'name.0.required' => 'name field is required',
'email.0.required' => 'email field is required',
'email.0.email' => 'The email must be a valid email address.',
'name.*.required' => 'name field is required',
'email.*.required' => 'email field is required',
'email.*.email' => 'The email must be a valid email address.',
]
);
foreach ($this->name as $key => $value) {
Employee::create(['name' => $this->name[$key], 'email' => $this->email[$key]]);
}
$this->inputs = [];
$this->resetInputFields();
session()->flash('message', 'Employee Has Been Created Successfully.');
}
}After that, Navigate to resources/views/livewire folder and open employees.blade.php file. Then add the following code into employees.blade.php file:
<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<form>
<div class=" add-input">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Name" wire:model="name.0">
@error('name.0') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="email" class="form-control" wire:model="email.0" placeholder="Enter Email">
@error('email.0') <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-2">
<button class="btn text-white btn-info btn-sm" wire:click.prevent="add({{$i}})">Add</button>
</div>
</div>
</div>
@foreach($inputs as $key => $value)
<div class=" add-input">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Name" wire:model="name.{{ $value }}">
@error('name.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input type="email" class="form-control" wire:model="email.{{ $value }}" placeholder="Enter Email">
@error('email.'.$value) <span class="text-danger error">{{ $message }}</span>@enderror
</div>
</div>
<div class="col-md-2">
<button class="btn btn-danger btn-sm" wire:click.prevent="remove({{$key}})">remove</button>
</div>
</div>
</div>
@endforeach
<div class="row">
<div class="col-md-12">
<button type="button" wire:click.prevent="store()" class="btn btn-success btn-sm">Save</button>
</div>
</div>
</form>
</div>Step 6: Make Route
In this step, Navigate to routes folder and open web.php. Then add the following routes into web.php file:
Route::get('/employees', function () {
return view('home');
});Step 7: Create Blade File
In this step, navigate to resources/views/ folder and create one blade view files that name home.blade.php file. Then add the following code into home.blade.php file:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Livewire 9 Dynamically Add/Remove Input Fields </title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
<!-- Styles -->
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
.full-height {
height: 100vh;
}
.flex-center {
align-items: center;
display: flex;
justify-content: center;
}
.position-ref {
position: relative;
}
.top-right {
position: absolute;
right: 10px;
top: 18px;
}
.content {
text-align: center;
}
.title {
font-size: 84px;
}
.links > a {
color: #636b6f;
padding: 0 25px;
font-size: 13px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.m-b-md {
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="row mt-5 justify-content-center">
<div class="mt-5 col-md-8">
<div class="card">
<div class="card-header bg-success text-white">
<h5 style="font-size: 19px;">Laravel Livewire 9 Dynamically Add/Remove Input Fields</h5>
</div>
<div class="card-body">
@livewire('employees')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>Step 8: Run Development Server
Finally, we need to execute the following PHP artisan serve command to start laravel livewire add or remove input fields dynamically example app:
php artisan serve
If we want to run the project diffrent port so use this below command
php artisan serve --port=8080 Now, open browser and test laravel 9 livewire dynamically add or remove input fields app:
http://localhost:8000/employees
The Laravel Livewire Load More OnScroll tutorial is over; in this tutorial, we learned the easiest way to integrate on scroll loads more in the laravel application using the livewire library.