wire:model | Bind Form Input in Laravel Livewire 3 | EP 12

In this post, I will show you how to use wire model with form with laravel livewire 3.

In this example, we will create a ProductCreate Livewire component. The component will include a form with input fields for the product's name, price, and details. then we will bind input field with component class variable using wire:model. so, let's follow the following steps:

Step 1: Create ProductCreate Component

Now here we will create a Livewire component using their command. So run the following command to create an add more component.

php artisan make:livewire ProductCreate

Now they created files on both paths:

app/Livewire/ProductCreate.php
   
resources/views/livewire/product-create.blade.php

Now, both files we will update as below for our contact us form.

app/Livewire/ProductCreate.php

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Product;

class ProductCreate extends Component
{
    public $name, $price, $detail;

    public function render()
    {
        return view('livewire.product-create');
    }

    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $this->validate([
            "name" => "required",
            "price" => "requierd|min:5|numeric",
            "detail" => "required"
        ]);

        $product = Product::create([
            "name" => $this->name,
            "price" => $this->price,
            "detail" => $this->detail
        ]);

        info($product);
    }
}

resources/views/livewire/product-create.blade.php

<div>

    <form wire:submit="submit">
        
        <label>Name:</label>
        <input type="text" name="name" class="form-control" wire:model.change="name">
        @error("name")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <label>Price:</label>
        <input type="text" name="price" class="form-control" wire:model="price">
        @error("price")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <label class="mt-1">Detail:</label>
        <textarea class="form-control" wire:model="detail"></textarea>
        @error("detail")
        <p class="text-danger">{{ $message }}</p>
        @enderror

        <button class="btn btn-success mt-3" type="submit">Submit</button>

    </form>
</div>

Step 2: Use Livewire Component

now, we will user counter component in home page. so you need to update home.blade.php file as the following way:

resources/views/home.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Product Create') }}</div>

                <div class="card-body">
                    <livewire:product-create />
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Run Laravel:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

Now, you need to register user and go to dashboard:

I hope it can help you...