Cómo Crear un Registro con Laravel y Livewire 3: Formulario Dinámico, Validaciones y Select desde Base de Datos

En este tutorial aprenderás paso a paso cómo crear un formulario profesional en Laravel Livewire para registrar nuevos transportistas. Trabajaremos completamente sin JavaScript, aprovechando el poder reactivo de Livewire con validaciones en tiempo real y un código limpio y escalable.

• 📝 Creación del formulario con Livewire
• ✔ Validaciones automáticas
• 💾 Registro de datos en la base de datos
• 🔄 Estados reactivos y controlados
• ⚡ Actualización sin recargar la página

Este artículo forma parte de un CRUD completo construido con Laravel + Livewire. En la parte anterior desarrollamos la lista tipo DataTable. Hoy avanzamos con la sección de crear (Create).

📌 1. ¿Por qué crear formularios con Livewire?

Livewire permite construir interfaces modernas sin escribir JavaScript. Algunas ventajas:

• ✔ Validaciones instantáneas
• ✔ Menos código, mayor productividad
• ✔ Integración perfecta con Eloquent
• ✔ Diseño totalmente personalizable con TailwindCSS
• ✔ Ideal para CRUD profesionales

Con Livewire puedes crear formularios inteligentes que responden al usuario en tiempo real.

📌 2. Estructura del componente Livewire (Create)

A continuación se muestra el componente encargado de registrar transportistas:

<?php

namespace App\Http\Livewire\Admin;

use App\Models\Tipodocumento;
use App\Models\Transportista;
use Livewire\Component;

class TransportistaCreate extends Component
{
    public $tipodocumento_id="";
    public $numdoc;
    public $nomrazonsocial;
    public $address;
    public $nromtc;
    public $predeterminado = 0;
    public $state = 1;
    public $tipodocumentos;

    public function mount()
    {
        $this->tipodocumentos = Tipodocumento::select('id', 'abbreviation')->get();
    }

    protected $rules = [
        'tipodocumento_id' => 'required',
        'numdoc' => 'required|min:8',
        'nomrazonsocial' => 'required',
        'address' => 'required',
        'nromtc' => 'required',
    ];

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

        Transportista::create([
            'tipodocumento_id' => $this->tipodocumento_id,
            'numdoc' => $this->numdoc,
            'nomrazonsocial' => $this->nomrazonsocial,
            'address' => $this->address,
            'nromtc' => $this->nromtc,
            'company_id' => auth()->user()->company_id,
            'predeterminado' => $this->predeterminado,
            'state' => $this->state,
        ]);
    }

    public function render()
    {
        return view('livewire.admin.transportista-create');
    }
}
?>

Este componente gestiona la carga del combo, el formulario, las validaciones y el almacenamiento.

📌 3. Vista del formulario (HTML + Tailwind + Livewire)

La vista contiene los campos del formulario, mensajes de error en tiempo real y un diseño simple pero profesional.

<div class="max-w-3xl p-6 mx-auto bg-white rounded shadow">

    <h2 class="mb-4 text-xl font-semibold text-gray-700">
        Crear Transportista
    </h2>

    <!-- Tipo de Documento -->
    <div class="mb-4">
        <x-jet-label value="Tipo Documento" />
        <select wire:model="tipodocumento_id"
                class="w-full h-10 border-gray-300 rounded-md shadow-sm">
            <option value="" disabled>Seleccione</option>
            @foreach ($tipodocumentos as $tipodocumento)
                <option value="{{ $tipodocumento->id }}">
                    {{ $tipodocumento->abbreviation }}
                </option>
            @endforeach
        </select>
        <x-jet-input-error for="tipodocumento_id" />
    </div>

    <!-- Numero Documento -->
    <div class="mb-4">
        <x-jet-label value="Número Documento" />
        <x-jet-input type="text" wire:model="numdoc" class="w-full"/>
        <x-jet-input-error for="numdoc" />
    </div>

    <!-- Razon Social -->
    <div class="mb-4">
        <x-jet-label value="Razón Social" />
        <x-jet-input type="text" wire:model="nomrazonsocial" class="w-full"/>
        <x-jet-input-error for="nomrazonsocial" />
    </div>

    <!-- Direccion -->
    <div class="mb-4">
        <x-jet-label value="Dirección" />
        <x-jet-input type="text" wire:model="address" class="w-full"/>
        <x-jet-input-error for="address" />
    </div>

    <!-- Nro MTC -->
    <div class="mb-4">
        <x-jet-label value="Nro MTC" />
        <x-jet-input type="text" wire:model="nromtc" class="w-full"/>
        <x-jet-input-error for="nromtc" />
    </div>

    <!-- Boton Guardar -->
    <button wire:click="save"
            class="px-4 py-2 font-semibold text-white bg-green-600 rounded hover:bg-green-700">
        Guardar
    </button>

</div>

Gracias a Livewire, los errores se muestran inmediatamente sin recargar la página.

📌 4. Funciones clave explicadas

📌 5. Ventajas de usar Livewire para formularios

• ✔ Validaciones sin recargar
• ✔ Campos reactivos
• ✔ Menos JavaScript, más productividad
• ✔ Integración directa con los modelos
• ✔ Perfecto para sistemas administrativos y ERP

🚀 Conclusión

En este artículo aprendiste a crear un formulario completo con Laravel Livewire para registrar transportistas. Ahora tienes un Create funcional con:

• ✔ Carga de catálogos
• ✔ Validaciones
• ✔ Guardado en base de datos
• ✔ Estados reactivos

En el siguiente artículo implementaremos:

• 🟡 Edición
• 🔴 Eliminación con confirmación

De esta forma completaremos el CRUD profesional con Livewire.

📞 Contáctanos

En Ticom Software somos especialistas en Laravel, PHP y Odoo ERP. Ofrecemos desarrollo de aplicaciones web, capacitaciones y soporte técnico.

• 🔗 Web: https://www.ticomsoftware.com
• 📧 Email: info@ticomsoftware.com
• 📱 WhatsApp: +51 996 929 478
• 🔵 Facebook: https://www.facebook.com/ticomperuscrl/
• 📸 Instagram: https://www.instagram.com/ticom.peru/
• 🎵 TikTok: https://www.tiktok.com/@ticomscrl