Formularios en Laravel Livewire

Hace tiempo hice un vídeo acerca de la nueva forma de desarrollar aplicaciones web con Laravel Livewire, lo puedes ver aquí. En esta entrada vamos a ver cómo trabajar con formularios en Laravel Livewire utilizando el sistema de validación de Laravel para crear y actualizar registros.

Curso recomendado con Laravel 9: Desarrolla un formulario con subida de archivos en Laravel Livewire

Curso recomendado con Laravel 9: Formularios Wizard en Laravel

Curso recomendado con Laravel 9: Formularios en Laravel, aprende a validar formularios complejos

Preparar la base de datos

Vamos a trabajar con un modelo Service, el cual será el encargado de gestionar servicios que nosotros como desarrolladores web podamos ofrecer a nuestros clientes: desarrollo web, gestión de servidores etc.

Para ello, lo primero será crear una migración, un modelo y un controlador.

Componente Formulario con Livewire

Ahora vamos a ejecutar el siguiente comando para crear un componente que represente un formulario con Livewire.

Ahora, vamos a modificar ese componente con el siguiente código.

• Las propiedades de ámbito público en Livewire están disponibles de forma automática en la template.

• Rules son las reglas de validación de nuestro componente, más abajo con $this->validate() se utilizan para validar el formulario.

• Para validar las propiedades del objeto Service sólo debemos definir la validación con service.{prop}.

• El método store será utilizado para crear nuevos servicios.

• El método update será utilizado para actualizar servicios existentes.

Pintar formularios en Laravel Livewire con Laravel Collective

Ahora abre el archivo form.blade.php y modifica su código por el siguiente. En mi caso, estoy trabajando con Laravel Collective, así que el siguiente código será suficiente para el formulario de alta/edición.

El formulario de servicios en sí es sencillo, simplemente hace uso de la directiva wire:submit y  wire:model para que nuestro formulario se pueda ejecutar contra nuestro componente Livewire aplicando las reglas de validación de forma correcta.

Para finalizar, sólo debes actualizar las vistas del controlador ServiceController para que el método create y edit muestren el componente formulario de Livewire que acabamos de crear.