Formulario

El bloque básico de construcción de cualquier sitio web o aplicación es el formulario. Si no necesitas un backend de base de datos, puedes usar el generador de formularios para crear uno simple. Ideal para formularios de contacto o de opinión donde los datos no se persisten.

Sintaxis

$ vela generate form [model] [fields...]
$ vela generate form contact name:text! email:email! message:editor

Esto creará un formulario en /contact y una definición de esquema Zod para la validación. Los archivos creados son:

src/routes/(public)/contact/+page.svelte
src/routes/(public)/contact/+page.server.ts
src/routes/(public)/contact/server.test.ts
src/lib/schemas/contact.ts

En un proyecto con shadcn-svelte, los componentes que el formulario necesite se instalan automáticamente. sveltekit-superforms y zod también se instalan si el proyecto no los tiene. La prueba de servidor solo se escribe cuando el proyecto tiene el entorno de vela test:server (supertest instalado).

El éxito se muestra como un mensaje flash cuando el proyecto tiene sveltekit-flash-message. Sin él, la acción devuelve el mensaje con message() de superforms.

Opciones

  • --remote - Generar el formulario con remote functions de SvelteKit en lugar de sveltekit-superforms
  • --route <route> - Colocar el formulario en una ruta personalizada. Por defecto es el nombre del modelo bajo (app) cuando la autenticación está habilitada, o (public) cuando no lo está. En un proyecto sin ninguno de los dos grupos, va directamente en src/routes.
  • --ui <shadcn|plain> - Generar componentes de shadcn-svelte o elementos HTML simples. Por defecto es shadcn cuando el proyecto tiene shadcn-svelte, y plain cuando no.
  • --ai <description> - Diseñar el formulario con IA a partir de una descripción en lenguaje natural

Ruta

--route coloca el formulario en cualquier punto del árbol de rutas, incluidos los segmentos dinámicos. El esquema sigue yendo a src/lib/schemas.

$ vela generate form project name:text! description:editor --route "(app)/[team_id]/projects/new"

Crea:

src/routes/(app)/[team_id]/projects/new/+page.svelte
src/routes/(app)/[team_id]/projects/new/+page.server.ts
src/routes/(app)/[team_id]/projects/new/server.test.ts
src/lib/schemas/project.ts

Recuerda la ruta que usaste — vela destroy form necesita el mismo --route para volver a encontrar los archivos.

HTML simple

--ui es shadcn por defecto cuando el proyecto tiene un components.json y el paquete shadcn-svelte o bits-ui. Si no, el formulario usa elementos HTML simples sin clases, y no se instala ningún componente. --ui plain hace lo mismo en un proyecto con shadcn-svelte; --ui shadcn en un proyecto sin él es un error — configúralo con npx sv add tailwindcss y luego npx shadcn-svelte@latest init, o ejecuta vela bless para la actualización completa.

En un proyecto creado con sv create, que no tiene grupos de rutas ni entorno de pruebas:

$ vela generate form contact name:text! email:email! message:editor

Crea:

src/routes/contact/+page.svelte
src/routes/contact/+page.server.ts
src/lib/schemas/contact.ts

El contenedor de cada campo tiene un atributo data-field con el nombre del campo, y data-invalid mientras el campo tiene errores. Los mensajes de error tienen data-error. Úsalos para dar estilo a todos los formularios generados desde una sola hoja de estilos. Sin sveltekit-flash-message, el mensaje de éxito se muestra encima del formulario.

Remote functions

--remote genera el formulario con remote functions de SvelteKit: un form.remote.ts ocupa el lugar de +page.server.ts, y las remote functions se activan en la configuración de SvelteKit. --route y --ui funcionan igual.

$ vela generate form --remote contact name:text! email:email! message:editor

Crea:

src/routes/(public)/contact/+page.svelte
src/routes/(public)/contact/form.remote.ts
src/routes/(public)/contact/server.test.ts
src/lib/schemas/contact.ts

Ejemplos

$ vela generate form profile avatar:file bio:editor website:url
$ vela generate form feedback rating:select(1,2,3,4,5) comment:editor

IA

Pro

--ai diseña el formulario a partir de una descripción en lenguaje natural, en dos fases: primero el esquema, después el diseño. Pasa una descripción en lugar de un nombre de modelo y campos, no además de — pasar ambos es un error.

$ vela generate form --ai "a feedback form with a 1-5 star rating"

Requiere una cuenta y un proyecto vinculado — ejecuta primero vela login y vela link.