Cómo construir formularios reutilizables en Vue3 con FormKit

Los formularios son la puerta de entrada para que los usuarios interactúen con su aplicación y proporcionen datos esenciales para tareas como la creación de cuentas, el procesamiento de pagos y la recopilación de información. Pero la creación de formularios puede ser una tarea desalentadora, que requiere un extenso código repetitivo que requiere mucho tiempo y es propenso a errores.

FormKit ofrece una solución al proporcionar componentes prediseñados que eliminan la necesidad de un código repetitivo. Aquí se explica cómo usarlo.

¿Qué es FormKit?

FormKit es un marco de creación de formularios de código abierto desarrollado específicamente para Vue 3, diseñado para simplificar el proceso de creación de formularios de alta calidad listos para producción. Es una versión mejorada del popular Vue formular biblioteca y proporciona más de 25 opciones de entrada personalizables y accesibles, junto con un conjunto predefinido de reglas de validación.

FormKit también ofrece la capacidad de generar formularios a través de esquemas dinámicos compatibles con JSON, lo que facilita la creación rápida de formularios complejos. Además, FormKit tiene una comunidad activa en Discord, brindando soporte y fomentando la colaboración entre los usuarios. Con sus funciones integrales y su sistema de soporte, FormKit es una herramienta confiable y eficiente para los desarrolladores que buscan crear formularios para sus proyectos de Vue 3.

Características del marco FormKit

Encontrará una amplia selección de funciones de creación de formularios en FormKit.

1. API de componente único

Una de las características interesantes de FormKit es su API de un solo componente: componente. Le da acceso a todos los tipos de entrada. Esto brinda acceso directo y fácil a la creación de elementos de formulario en lugar de tener que usar elementos HTML nativos.

2. Reglas de validación predefinidas

Formkit simplifica el manejo de validaciones de formularios al permitirle aplicar directamente un conjunto de reglas a las entradas usando el accesorio de validación. Tiene más de 30 reglas predefinidas diferentes que puede seleccionar según sus preferencias. Alternativamente, puede crear reglas personalizadas registradas globalmente o específicamente en la entrada para restricciones complejas.

3. Opciones de estilo personalizables

FormKit viene sin opciones de estilo predeterminadas, pero tiene un tema base opcional: Génesis. Necesitas instalar esto por separado.

Al instalar primero el @formkit/temas paquete.

instalar npm @formkit/themes

Luego impórtalo a tu proyecto.

importar'@formkit/temas/génesis'

Otras opciones de estilo incluyen el uso de clases personalizadas que le permiten aplicar sus propios estilos y clases al marcado proporcionado por FormKit.

4. Generación de esquemas

La generación de esquemas de FormKit es una característica excelente que simplifica el proceso de creación de campos de formulario. Un esquema es una matriz de objetos, cada uno de los cuales representa un elemento HTML y puede representar solo en formato JSON.

La matriz de esquema consta de objetos de nodo FormKit que corresponden a varios elementos, como elementos HTML, componentes o nodos de texto. Estos objetos pueden hacer referencia a variables de Vue preexistentes y representar cualquier marcado o componente con atributos y accesorios editables, lo que lo convierte en un método eficiente para crear y personalizar formularios. De forma predeterminada, no está registrado globalmente, por lo que debe importarlo.

importar { FormKitSchema } de'@formkit/vue'

Integrando FormKit en Vue3

Para comenzar a usar FormKit en una aplicación Vue 3, primero instálelo dentro de su proyecto. Esta sección incluirá una demostración utilizando una nueva aplicación vue desde cero.

Requisitos previos para usar FormKit

Antes de comenzar, asegúrese de tener lo siguiente:

• Comprensión fundamental de Vue y JavaScript
• Node.js y npm configurados en su computadora

Una vez que esté al día, estará listo para crear su primera aplicación.

Creación de una nueva aplicación Vue

Primero, ejecute el siguiente comando en su terminal para inicializar una nueva aplicación Vue:

npm inicial vista@el último

Luego, siga los pasos especificados en el indicador de acuerdo con su preferencia. Una vez que el proyecto se haya instalado por completo, proceda a instalar FormKit en la aplicación.

instalar npm @formkit/vue 

A continuación, en el principal.js archivo.

importar { crear aplicación } de'vue'
importar'./estilo.css'
importar aplicación de'./Aplicación.vue'
// Configuración del kit de formularios
importar {complemento, configuración predeterminada} de"@formkit/vue";
// Importar el tema Génesis
importar"@formkit/temas/génesis";
createApp (Aplicación).uso(enchufar, configuración predeterminada). montar ('#aplicación')

El paquete @formkit/vue viene incluido con un complemento Vue y una configuración predeterminada para una instalación perfecta. Una vez que haya completado la configuración, estará listo para incorporar el componente en su aplicación Vue 3. Además, puede agregar la configuración para los temas de Génesis como se indicó anteriormente.

Creación de formularios reutilizables con FormKit

Esta sección demuestra cómo utilizar FormKit para crear un formulario funcional y personalizable mediante la creación de un formulario de registro simple.

Para una mejor estructura de código, es bueno crear un archivo separado para este componente: Formulario de registro.vue

En primer lugar, defina el elemento de entrada usando este formato

tipo="texto"
 etiqueta="Nombre de pila"
 marcador de posición ="Abiola"
 validación="requerido|longitud: 4"
ayuda = "Ingrese un mínimo de 4 caracteres"
<FormKit/>

Este código muestra cómo usar FormKit para generar una entrada de texto usando un tipo de texto. La propiedad de validación separa las reglas usando el símbolo de barra vertical "|". El accesorio de ayuda coloca un texto pequeño justo debajo del elemento de entrada.

Además, puede explorar otros tipos de entrada como los que se muestran a continuación.

tipo="texto"
 etiqueta="Apellido"
 marcador de posición ="Ester"
 validación="requerido|longitud: 4"
ayuda = "Ingrese un mínimo de 4 caracteres"
 />
tipo="correo electrónico"
 etiqueta="Dirección de correo electrónico"
 prefijo-icono="correo electrónico"
 validación="requerido|correo electrónico"
 marcador de posición ="[email protected]"
 />
tipo="fecha"
 etiqueta="Fecha de nacimiento"
ayuda="Ingrese su cumpleaños en el formato- DD/MM/YYYY"
 validación="requerido"
 />
 v-modelo="valor"
tipo="radio"
 etiqueta="Género"
 :opciones="['Macho femenino']"
ayuda="Selecciona tu género"
 />
tipo="archivo"
 etiqueta="Sube tu foto"
 aceptar =".jpg, .png, .jpeg"
ayuda="Selecciona tu imagen"
 />

El código muestra cómo usar algunos de los otros elementos de entrada y establecer las reglas de validación.

FormKit incluye un accesorio de tipo llamado "formulario" que envuelve todos los elementos de entrada. Supervisa el estado de validación del formulario y bloquea a los usuarios para que no lo envíen si alguna entrada no es válida. Además, genera automáticamente un botón de envío.

tipo="forma"
 forma-clase="contenedor exterior"
 enviar-etiqueta="Registro"
@entregar="Registro">

La combinación de todo junto presenta el formulario completo, como se muestra en la imagen a continuación.

Generación de formularios utilizando el esquema de FormKit

Con los esquemas JSON, es posible generar formularios similares a los elementos de entrada, como se hizo anteriormente. Para generar el formulario, simplemente proporcione su matriz de esquema al componente utilizando el esquema apuntalar.

La matriz del esquema

constante esquema = [
 {
 $formkit: "correo electrónico",
 nombre: "correo electrónico",
 etiqueta: "Dirección de correo electrónico",
 marcador de posición: "Introduce tu correo electrónico",
 validación: "requerido|correo electrónico",
 },
 {
 $formkit: 'contraseña',
 nombre: 'contraseña',
 etiqueta: 'Contraseña',
 validación: 'requerido|longitud: 5,16'
 },
 {
 $formkit: 'contraseña',
 nombre: 'contraseña confirmada',
 etiqueta: 'Confirmar Contraseña',
 validación: 'requerido|confirmar',
 etiqueta de validación: 'confirmación de contraseña',
 },
 ];

Luego se pasa al accesorio en el componente FormKit.

"forma" forma-clase="contenedor exterior"etiqueta de envío ="Acceso">
<FormKitSchema:esquema="esquema" />
FormKit>

Esta es la salida final generada:

Un enfoque más rápido para crear formularios en Vue3

FormKit proporciona un enfoque más rápido y eficiente para crear formularios en Vue 3. Con FormKit, puede eliminar la necesidad de crear plantillas repetitivas desde cero, lo que le permite concentrarse en implementar la lógica directamente. Este proceso simplificado no solo ahorra tiempo sino que también mejora la productividad.

Además, FormKit permite la representación dinámica de formularios a través de la representación condicional. Esta característica le permite crear interfaces interactivas y fáciles de usar para los usuarios, donde los elementos del formulario se muestran u ocultan según ciertas condiciones.