Formularios en Laravel Livewire

Fecha de publicación: julio 17, 2021

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

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.

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.

¿Quieres acceder a más de 150 cursos de PHP y JavaScript?

¿Quieres ganar tiempo en tus desarrollos con nuestros proyectos descargables?


Vue, Laravel, Inertia, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Hazte Premium y consigue acceso completo
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register