## Form
Form consiste en `input`, `radio`, `select`, `checkbox`, etcétera. Con el formulario, usted puede recopilar, verificar y enviar datos.
:::tip
The component has been upgraded with a flex layout to replace the old float layout.
:::
### 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 ítem.
```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.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
```
:::
:::tip
Se debe llamar a la función de validación de llamada de retorno personalizada. Ver uso más avanzado en [async-validator](https://github.com/yiminghe/async-validator).
:::
### 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 validación numérica 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 | Posición de la etiqueta | string | left / right / top | right |
| label-width | anchura de la etiqueta, por ejemplo, "50px". Todos sus elementos de formulario hijo directo heredarán este valor. El valor `auto` está soportado. | string / number | — | — |
| label-suffix | sufijo de la etiqueta | string | — | — |
| hide-required-asterisk | si los campos obligatorios deben tener un asterisco rojo (estrella) al lado de sus etiquetas | boolean | — | false |
| 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 validación 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. Recibe una llamada como parámetro. Después de la validación, la llamada de retorno se ejecutará con dos parámetros: un booleano que indica si la validación ha pasado, y un objeto que contiene todos los campos que fallaron en la validación. Devuelve una promesa si se omite el return | Function(callback: Function(boolean, object)) |
| validateField | validar uno o varios elementos de formulario | Function(props: string \| array, callback: Function(errorMessage: string)) |
| resetFields | restablece todos los campos y elimina el resultado de validación | — |
| clearValidate | borra el mensaje de validación para determinados campos. El parámetro es un prop name o un array de props names de los items 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: string \| array) |
### Form Events
| Nombre | Descripción | Parametros |
| -------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| validate | se dispara después de validar un ítem del formulario | la propiedad (`prop name`) nombre del ítem del form que se esta validando, si la validación paso o no, y el mensaje de error si existe. |
### Form-Item Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------------- | ------------------------------------------------------------ | ------- | ------------------------------------------- | ----------- |
| prop | un clave del modelo. En el uso del método `validate` y `resetFields`, el atributo es obligatorio. | string | Clave del modelo que se ha pasado a `form` | |
| label | etiqueta | string | — | — |
| label-width | ancho de la etiqueta, Ejemplo: '50px'. El valor `auto` esta soportado | string / number | — | — |
| required | si el campo es obligatorio o no, estará determinado por las reglas de validación si se omite. | boolean | — | false |
| rules | reglas de validación del form, ver más información en [async-validator](https://github.com/yiminghe/async-validator) | object / array | — | — |
| 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 | — |
### Rules
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| -------- | ----------------- | ------ | ---- | ---- |
| trigger | how the validator is triggered | string | blur / change | — |
### Form-Item Slot
| Nombre | Descripción |
| ------ | ------------------------ |
| — | contenido del Form Item |
| label | Custom content to display on label. The scope parameter is { label } |
| error | Contenido personalizado para mostrar el mensaje de validación. El parámetro del scope es { error } |
### Form-Item Metodo
| Metodo | Descripción | Parametros |
| ------------- | ----------------------------------------------------------- | ---------- |
| resetField | restablecer campo actual y eliminar resultado de validación | — |
| clearValidate | elimina el estado de la validación de un campo | — |