Crearea de formulare dinamice cu Livewire și validare în timp real

Sumar

1. Introducere în formulare Livewire
2. Crearea componentului
3. Binding și actualizare în timp real
4. Validare formulare
5. Exemple dinamice
6. Concluzie

Introducere în formulare Livewire

Livewire permite crearea de formulare interactive care se actualizează instantaneu fără a scrie JavaScript. Datele sunt sincronizate între componenta PHP și view-ul Blade.

Crearea componentului

php artisan make:livewire ContactForm

Acesta va crea:

• app/Http/Livewire/ContactForm.php
• resources/views/livewire/contact-form.blade.php

ContactForm.php

namespace App\Http\Livewire;

use Livewire\Component;

class ContactForm extends Component
{
    public $name = '';
    public $email = '';
    public $message = '';

    public function submit()
    {
        $this->validate([
            'name' => 'required|min:3',
            'email' => 'required|email',
            'message' => 'required|min:10',
        ]);

        // Salvare sau procesare date
        session()->flash('success', 'Mesaj trimis cu succes!');
        $this->reset();
    }

    public function render()
    {
        return view('livewire.contact-form');
    }
}

Binding și actualizare în timp real

<form wire:submit.prevent="submit">
    <input type="text" wire:model.debounce.500ms="name" placeholder="Nume">
    @error('name') <span class="error">{{ $message }}</span> @enderror

    <input type="email" wire:model="email" placeholder="Email">
    @error('email') <span class="error">{{ $message }}</span> @enderror

    <textarea wire:model="message" placeholder="Mesaj"></textarea>
    @error('message') <span class="error">{{ $message }}</span> @enderror

    <button type="submit">Trimite</button>
</form>

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

Validare formulare

• Validarea se face în componenta PHP folosind metoda $this->validate().
• Livewire poate valida în timp real folosind wire:model.lazy sau wire:model.debounce.

Exemple dinamice

Poți adăuga câmpuri dinamice, de ex. liste de contacte:

public $contacts = [];

public function addContact()
{
    $this->contacts[] = ['name' => '', 'email' => ''];
}

public function removeContact($index)
{
    unset($this->contacts[$index]);
}

Concluzie

Formularele Livewire oferă interactivitate și validare în timp real, reducând dependența de JavaScript și făcând aplicațiile Laravel mai reactive.