Hai Dev,

Hari ini, saya akan berbagi dengan Anda bagaimana cara menambah atau menghapus field input menggunakan aplikasi livewire di laravel. saya juga menerapkan secara dinamis menghasilkan validasi input. Jadi jika Anda harus menambahkan lebih dari satu field secara dinamis dengan laravel livewire.

Anda dapat menambahkan lebih banyak kolom input di laravel livewire. laravel livewire menambahkan lebih banyak kolom input secara dinamis. Kami akan menampilkan secara dinamis menambah atau menghapus bidang input laravel livewire.

Livewire adalah kerangka kerja full stack untuk Laravel yang membuat membangun antarmuka dinamis menjadi sederhana, tanpa meninggalkan kenyamanan Laravel .Lewewire hanya bergantung pada permintaan AJAX untuk melakukan semua komunikasi servernya.

Di sini saya akan memberikan contoh lengkap untuk menambah atau menghapus field input secara dinamis di laravel livewire. Jadi mari kita ikuti langkah demi langkah di bawah ini.

Langkah 1: Instal Aplikasi Laravel

Pada langkah pertama, kita perlu mendapatkan aplikasi versi laravel menggunakan perintah di bawah ini. Jadi mari kita buka terminal dan jalankan perintah di bawah ini.

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

Langkah 2: Konfigurasi Basis Data

Setelah berhasil menginstal aplikasi laravel kemudian mengkonfigurasi pengaturan database. Kami akan membuka file ".env" dan mengubah nama database, nama pengguna dan kata sandi di file env.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

Langkah 3: Instal Livewire

Pada langkah ini, Anda cukup menginstal livewire ke aplikasi laravel kami menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Buat Komponen

Sekarang, Anda dapat membuat komponen livewire menggunakan perintah di bawah, Jadi mari kita jalankan perintah di bawah ini untuk membuat komponen form user:

php artisan make:livewire users

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/Users.php
resources/views/livewire/users.blade.php

Sekarang file pertama kita akan perbarui sebagai di bawah untuk file Users.php.

app/Http/Livewire/Users.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\User;
use App\Http\Livewire\Field;
use Illuminate\Http\Request;

class Users extends Component
{
    public $users, $name, $email, $user_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->users = User::all();
        return view('livewire.users');
    }

    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) {
            User::create(['name' => $this->name[$key], 'email' => $this->email[$key]]);
        }

        $this->inputs = [];

        $this->resetInputFields();

        session()->flash('message', 'Users Created Successfully.');
    }
}

Langkah 5: Tambahkan Route

Sekarang kita perlu menambahkan route untuk image form di aplikasi laravel. jadi buka file "route/web.php" Anda dan tambahkan rute berikut.

routes/web.php

Route::view('users','livewire.home');

Langkah 6: Buat View

Di sini, kita akan membuat file blade untuk call crud opertaion route. di file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('users'). jadi mari tambahkan.

resources/views/livewire/users.blade.php
<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>

resources/views/livewire/home.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="{{ asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    @livewireStyles
</head>
<body>
    <div class="container">
        <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 - Dynamically Add or Remove input fields - Medikre.com</h5></div>

                    <div class="card-body">
                        @if (session()->has('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif

                        @livewire('users')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</script>
</body>
</html>

Sekarang kami siap untuk menjalankan contoh kami jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://localhost:8000/users

Semoga itu akan membantumu..

Pratinjau: