ใน Livewire การจัดการฟอร์มเป็นหนึ่งในฟังก์ชันที่สำคัญ เพราะช่วยให้ผู้พัฒนาสามารถสร้างฟอร์มที่โต้ตอบกับผู้ใช้ได้แบบ Real-Time โดยไม่ต้องรีเฟรชหน้าเว็บ ฟอร์มใน Livewire สามารถใช้ wire:model เพื่อทำการ Two-Way Data Binding ระหว่างข้อมูลในฟอร์มและตัวแปรใน Component นอกจากนี้ยังสามารถตรวจสอบความถูกต้องของข้อมูล (validation) ได้อย่างง่ายดาย

ตัวอย่างการใช้งานฟอร์มด้วย Livewire

สร้าง Component สำหรับฟอร์ม ในตัวอย่างนี้ เราจะสร้าง Component ชื่อ ContactForm ซึ่งมีฟอร์มให้ผู้ใช้กรอกชื่อ (name) และอีเมล (email) จากนั้นใช้คำสั่ง:

php artisan make:livewire ContactForm

สร้างฟังก์ชันสำหรับการจัดการข้อมูลใน Component (ContactForm.php) เปิดไฟล์ ContactForm.php และสร้างตัวแปร $name และ $email เพื่อเก็บข้อมูลจากฟอร์ม รวมถึงสร้างฟังก์ชัน submitForm เพื่อจัดการข้อมูลที่ผู้ใช้กรอก:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ContactForm extends Component
{
    public $name;
    public $email;

    protected $rules = [
        'name' => 'required|min:3',
        'email' => 'required|email'
    ];

    public function submitForm()
    {
        $this->validate();

        // ประมวลผลข้อมูล เช่น บันทึกลงฐานข้อมูล
        session()->flash('message', 'Form submitted successfully!');

        // รีเซ็ตค่าในฟอร์มหลังการส่ง
        $this->reset(['name', 'email']);
    }

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

• ใช้ $rules เพื่อกำหนดการตรวจสอบความถูกต้องของข้อมูลในฟอร์ม
• ฟังก์ชัน submitForm จะทำการตรวจสอบข้อมูล (validate) และเมื่อข้อมูลถูกต้อง จะส่งข้อความยืนยัน และรีเซ็ตค่าฟิลด์ในฟอร์ม

สร้าง UI ฟอร์มใน Blade View (contact-form.blade.php) ในไฟล์ contact-form.blade.php ให้เขียน HTML ของฟอร์ม และใช้ wire:model เพื่อผูกข้อมูลฟอร์มกับตัวแปรใน Component และใช้ wire:submit.prevent เพื่อป้องกันการรีเฟรชหน้าหลังการส่งฟอร์ม:

<div>
    @if (session()->has('message'))
        <p>{{ session('message') }}</p>
    @endif

    <form wire:submit.prevent="submitForm">
        <label for="name">Name:</label>
        <input type="text" id="name" wire:model="name">
        @error('name') <span class="error">{{ $message }}</span> @enderror

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

        <button type="submit">Submit</button>
    </form>
</div>

• wire:model="name" และ wire:model="email" ใช้สำหรับ Two-Way Data Binding
• @error ใช้สำหรับแสดงข้อความผิดพลาดกรณีข้อมูลไม่ผ่านการตรวจสอบ

การแสดง Component ใน Blade Template เรียกใช้ Component ในหน้า Blade Template เช่น home.blade.php:

@livewire('contact-form')

1. ผลลัพธ์ที่ได้ เมื่อผู้ใช้กรอกข้อมูลและกดปุ่ม “Submit” ระบบจะทำการตรวจสอบความถูกต้องของข้อมูล ถ้ามีข้อมูลไม่ครบหรือรูปแบบไม่ถูกต้อง ระบบจะแสดงข้อความผิดพลาด หากข้อมูลถูกต้อง ระบบจะส่งข้อความยืนยันการส่งข้อมูลเสร็จสิ้นและรีเซ็ตฟิลด์ฟอร์มให้ว่างเปล่า

การนำไปใช้งาน

การจัดการฟอร์มใน Livewire ทำให้การพัฒนา UI ที่ต้องการรับข้อมูลจากผู้ใช้ทำได้ง่ายขึ้น ลดการเขียน JavaScript และช่วยให้การจัดการข้อมูลและการตรวจสอบความถูกต้องทำได้อย่างเป็นระเบียบ สามารถนำไปใช้ได้ใน:

• ฟอร์มสมัครสมาชิก
• ฟอร์มการติดต่อ
• ฟอร์มกรอกข้อมูลอื่น ๆ ที่ต้องการการตรวจสอบความถูกต้องและการตอบสนอง Real-Time