## Form Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos. ### Form básico Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox`. :::demo En cada componente `form`, necesita un campo `form-item` para que sea el contenedor del item. ```html - Create Cancel ``` ::: :::tip [W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que > Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar Enter en ese campo como una solicitud para enviar el formulario. Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on ``. ::: ### Formulario inline Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea. :::demo Establezca el atributo `inline` como `true` y el formulario sera inline. ```html Query ``` ::: ### Alineamiento Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta. :::demo El atributo `label-position` decide cómo se alinean las etiquetas, puede estar `top` o `left`. Cuando se establece en `top`, las etiquetas se colocarán en la parte superior del campo de formulario. ```html Left Right Top

``` ::: ### Validación El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores. :::demo Sólo tiene que añadir el atributo `rules` en el componente `Form`, pasar las reglas de validación y establecer el atributo `prop` para `Form-Item` como una clave específica que necesita ser validada. Ver más información en [async-validator](https://github.com/yiminghe/async-validator). ```html - Create Reset ``` ::: ### Reglas personalizadas de validación Este ejemplo muestra cómo personalizar sus propias reglas de validación para finalizar una verificación de contraseña de dos pasos. :::demo Aquí utilizamos el `status-icon` para reflejar el resultado de la validación como un icono. ```html Submit Reset ``` ::: ### Eliminar o agregar validaciones dinamicamente :::demo Además de pasar todas las reglas de validación al mismo tiempo en el componente `form`, también puede pasar las reglas de validación o borrar reglas en un único campo de formulario de forma dinámica. ```html Delete Submit New domain Reset ``` ::: ### Validación numerica :::demo La validacion numerica necesita un modificador `.number` añadido en el enlace `v-model` de entrada, sirve para transformar el valor de la cadena al número proporcionado por Vuejs. ```html Submit Reset ``` ::: :::tip Cuando un `el-form-item` está anidado en otro `el-form-item`, su ancho de etiqueta será 0. Si es necesario, puede establecer el ancho de etiqueta en ese `el-form-item`. ::: ### Tamaño del control Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`. :::demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem. ```html - Create Cancel ``` ::: ### Form Atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | ----------------------- | ---------------------------------------- | ------- | --------------------- | ----------- | | model | Datos del componente | object | — | — | | rules | Reglas de validación | object | — | — | | inline | Si el form es inline | boolean | — | false | | label-position | Posicion de la etiqueta | string | left / right / top | right | | label-width | ancho de la etiqueta, y todos los form items directos descendientes heredarán este valor | string | — | — | | label-suffix | sufijo de la etiqueta | string | — | — | | show-message | si mostrar o no el mensaje de error | boolean | — | true | | inline-message | si desea visualizar el mensaje de error inline con la posición del form item | boolean | — | false | | status-icon | si desea visualizar un icono que indique el resultado de la validación | boolean | — | false | | validate-on-rule-change | si se dispara la validacion cuando el prop `rules` cambia | boolean | — | true | | size | el tamaño de los componentes en este form | string | medium / small / mini | — | | disabled | si se desactivan todos los componentes del formulario. Si esta en `true` no puede ser cambiado por el prop `disabled` individual de los componentes. | boolean | — | false | ### Form Metodos | Metodo | Descripción | Parametros | | ------------- | ---------------------------------------- | ---------------------------------------- | | validate | el método para validar todo el formulario. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) | | validateField | el método para validar un determinado form item | Function(prop: string, callback: Function(errorMessage: string)) | | resetFields | restablece todos los campos y elimina el resultado de validación | — | | clearValidate |limpieza de validación para determinados campos. El parámetro es un conjunto de nombres de propiedad de los elementos del formulario cuyos mensajes de validación se eliminarán. Si se omiten, se borrarán todos los mensajes de validación de los campos. | Function(props: array) ### Form Events | Nombre | Descripción | Parametros | | -------- | ---------------------------------------------------- | ------------------------------------------------------------ | | validate | se dispara después de validar un item del formulario | la propiedad (`prop name`) nombre del item del form que se esta validando, si la validacion paso o no. | ### Form-Item Atributos | Atributo | Descripción | Tipo | Valores aceptados | Por defecto | | -------------- | ---------------------------------------- | ------- | ----------------------------------- | ----------- | | prop | un key de `model`. En el uso del método validate and resetFields, el atributo es obligatorio. | string | keys of model that passed to `form` | | | label | etiqueta | string | — | — | | label-width | ancho de la etiqueta, e.g. '50px' | string | — | — | | required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false | | rules | reglas de validacion del form | object | — | — | | error | mensaje de error de campo, establezca su valor y el campo validará el error y mostrará este mensaje inmediatamente. | string | — | — | | show-message | si mostrar o no el mensaje de error | boolean | — | true | | inline-message | mensaje de validación estilo inline | boolean | — | false | | size | Tamaño de los componentes en este form item | string | medium / small / mini | - | ### Form-Item Slot | Nombre | Descripción | | ------ | ------------------------ | | — | contenido del Form Item | | label | contenido de la etiqueta | ### Form-Item Scoped Slot | Name | Description | |---------------|-------------| | error | Custom content to display validation message. The scope parameter is { error } | ### Form-Item Metodo | Metodo | Descripción | Parametros | | ---------- | ---------------------------------------- | ---------- | | resetField | restablecer campo actual y eliminar resultado de validación | — | | clearValidate | elimina el estado de la validacion de un campo | - |