Form
El componente e-form centraliza el comportamiento de los fields que viven dentro de el. Puede propagar configuracion compartida como outlined, disabled, readonly y retainColor, controlar la validacion al enviar, exponer metodos de validacion y activar el modo de layout table cuando el formulario necesita una estructura mas fuerte.
Esta pagina muestra como Form toma el control de sus hijos desde un solo punto para unificar estados, apariencia y validacion, y como e-form-column completa esa capa de orquestacion cuando el flujo necesita acciones y estructura adicional.
Uso
Usa este playground para ver como un solo Form aplica comportamiento compartido sobre varios fields al mismo tiempo. El preview muestra el efecto de outlined, disabled, readonly y retainColor sobre el mismo bloque de inputs, mientras el selector de color actualiza la presentacion del conjunto.
Comportamiento compartido del formulario
Un padre controla multiples child fields
Comportamiento heredado por hijos
Este preview muestra como Form empuja configuracion compartida hacia fields compatibles sin repetir la misma prop en cada hijo. Aqui el contenedor aplica labelBehavior con valor floating y outlined una sola vez para mantener el mismo tratamiento visual en textfields, selects y textareas dentro del bloque.
Layout tipo tabla
Este preview muestra a Form en modo table para presentar un bloque de datos operativos con una estructura mas rigida. El ejemplo aplica fieldColor en primary y labelBehavior en floating, mientras la misma matriz renderiza ticketId, assignee, environment y requiresApproval dentro de un card de aprobacion estructurada.
Formulario estructurado de aprobacion
Layout tipo tabla para inputs de negocio densos
Form column y acciones
Este preview muestra como e-form-column reserva una fila propia dentro de Form para alinear acciones sin romper la grilla del formulario. Despues de los campos Workflow name y Owner, la columna empuja el CTA principal hacia el extremo derecho y mantiene la accion integrada en el mismo flujo visual del bloque.
Layout de acciones con Form Column
Agrupa fields y acciones sin romper la alineacion
Ciclo de validacion
Este preview muestra un flujo de validacion gobernado por Form al momento del submit. El contenedor activa validate-on-submit y focus-first-invalid, evalua reglas sobre subject, message y policyAccepted, y actualiza el feedback superior segun si se dispara submit o submit-invalid.
Flujo de validacion al enviar
Envia el formulario para probar los eventos del ciclo de validacion.
Metodos expuestos
Este preview muestra como controlar una instancia de Form desde acciones explicitas fuera del submit nativo. Los botones disparan validate() para inspeccionar si el bloque es valido y resetValidation() para limpiar los mensajes de error, mientras el texto superior resume el ultimo resultado ejecutado.
Control programatico del formulario
Elige una accion para inspeccionar el comportamiento de la instancia del form.
Props
Usa la tabla de API como fuente de verdad para props aceptadas, valores por defecto, eventos emitidos y notas de comportamiento.
| Propiedad | Tipo | Por defecto |
|---|---|---|
| modelValue | boolean | undefined | undefined |
Estado actual de validez del formulario emitido por v-model. | ||
| lazy | boolean | false |
Opcion reservada del formulario para flujos de validacion diferida. | ||
| focusFirstInvalid | boolean | false |
Mueve el foco al primer field invalido despues de una validacion fallida. | ||
| validateOnSubmit | boolean | false |
Ejecuta la validacion de los hijos automaticamente antes de emitir submit. | ||
| outlined | boolean | false |
Propaga la presentacion outlined hacia los fields hijos compatibles. | ||
| disabled | boolean | false |
Propaga el estado disabled hacia los fields hijos compatibles. | ||
| readonly | boolean | false |
Propaga el estado readonly hacia los fields hijos compatibles. | ||
| labelBehavior | FieldLabelBehavior | undefined |
Comportamiento compartido de label que se empuja a los fields hijos compatibles. | ||
| labelMinWidth | string | number | undefined |
Aplica un ancho minimo compartido de label cuando los fields hijos renderizan labels alineados. | ||
| retainColor | boolean | false |
Conserva el color semantico del field en los hijos compatibles. | ||
| fieldColor | string | undefined |
Define el color compartido que Form empuja hacia los fields hijos compatibles. Si se usan fieldColor y color al mismo tiempo, fieldColor tiene prioridad para el color heredado por los hijos. | ||
| color | string | undefined |
Color de respaldo usado para el color heredado por los fields hijos cuando fieldColor no esta definido. En modo tabla tambien puede actuar como fuente legacy para el color de los separadores cuando tableLineColor no esta definido. | ||
| table | boolean | false |
Activa el tratamiento estructurado de layout tipo tabla para los child fields. | ||
| tableLineColor | string | undefined |
Sobrescribe el color de los separadores usado en modo tabla. | ||
| tableCellBackgroundColor | string | undefined |
Define el color de fondo aplicado a las celdas de fields en modo tabla. | ||
| tableFieldColor | string | undefined |
Alias legacy usado para resolver el tratamiento de fondo en las celdas de tabla. | ||
| tableLineOpacity | string | number | undefined |
Ajusta la opacidad de los separadores en modo tabla. | ||