wire:dirty in Laravel Livewire 3 | EP 16

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

The `wire:dirty` directive in Livewire is used to apply a CSS class when a form input has been modified but not yet saved. In this example, we will create a `ProductCreate` Livewire component with input fields for the product's name, price, and details. When a user changes an input field, the `wire:dirty` directive will dynamically add a class to indicate unsaved changes. This helps improve UX by visually highlighting modified fields.

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">
        
        <div>
            <label>Name:</label>
            <input 
                type="text" 
                name="name" 
                class="form-control" 
                wire:model="name"
                wire:dirty.class="is-invalid"
                wire:dirty.class.remove="is-valid">
        </div>

        <div>
            <label>Price:</label>
            <input 
                type="text" 
                name="price" 
                class="form-control" 
                wire:model="price"
                wire:dirty.class="is-invalid"
                wire:dirty.class.remove="is-valid">
        </div>

        <div>
        <label class="mt-1">Detail:</label>
        <textarea 
                class="form-control" 
                wire:model="detail"
                wire:dirty.class="is-invalid"
                wire:dirty.class.remove="is-valid"></textarea>
        </div>

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

        <div wire:dirty>Unsaved input...</div>

    </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...