@@ -325,17 +325,17 @@ It includes all kinds of input items, such as `input`, `select`, `radio` and `ch
:::
:::tip
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) regulates that
> <i>When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.</i>
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
> <i>Cuando sólo hay un campo de entrada de texto de una sola línea en un formulario, el agente usuario debe aceptar <b>Enter</b> en ese campo como una solicitud para enviar el formulario.</i>
To prevent this behavior, you can add`@submit.native.prevent` on `<el-form>`.
Para prevenir este comportamiento, puede agregar`@submit.native.prevent` on `<el-form>`.
:::
### Inline form
### Formulario inline
When the vertical space is limited and the form is relatively simple, you can put it in one line.
Cuando el espacio vertical es limitado y la forma es relativamente simple, puede ponerlo en una unica línea.
:::demo Set the `inline` attribute to `true` and the form will be inline.
:::demo Establezca el atributo `inline` como `true` y el formulario sera inline.
@@ -372,12 +372,14 @@ When the vertical space is limited and the form is relatively simple, you can pu
```
:::
### Alignment
### Alineamiento
Depending on your design, there are several different ways to align your label element.
Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento de la etiqueta.
:::demo The `label-position` attribute decides how labels align, it can be `top` or `left`. When set to `top`, labels will be placed at the top of the form field.
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.
@@ -413,11 +415,11 @@ Depending on your design, there are several different ways to align your label e
```
:::
### Validation
### Validación
Form component allows you to verify your data, helping you find and correct errors.
El componente `form` le permite verificar sus datos, ayudándole a encontrar y corregir errores.
:::demo Just add the `rules` attribute for `Form` component, pass validation rules, and set `prop` attribute for `Form-Item` as a specific key that needs to be validated. See more information at[async-validator](https://github.com/yiminghe/async-validator).
:::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).
@@ -626,9 +629,9 @@ This example shows how to customize your own validation rules to finish a two-fa
```
:::
### Delete or add form items dynamically
### Eliminar o agregar validaciones dinamicamente
:::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
:::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.
@@ -704,9 +707,10 @@ This example shows how to customize your own validation rules to finish a two-fa
```
:::
### Number Validate
### 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.
::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
@@ -754,14 +758,17 @@ This example shows how to customize your own validation rules to finish a two-fa
:::
:::tip
When an `el-form-item` is nested in another `el-form-item`, its label width will be `0`. You can set `label-width` on that `el-form-item` if needed.
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`.
:::
### Size control
### Tamaño del control
Todos los componentes de un formulario heredan su atributo `size`. De manera similar, FormItem también tiene un atributo `size`.
All components in a Form inherit their `size` attribute from that Form. Similarly, FormItem also has a `size` attribute.
::: demo Aún así, puede ajustar el `size` de cada componente si no desea que herede su tamaño de From o FormItem.
::: demo Still you can fine tune each component's `size` if you don't want that component to inherit its size from From or FormIten.
| 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. | string | — | 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
| Name | Description |
|------|--------|
| — | content of Form Item |
| label | content of label |
| Nombre | Descripción |
| ------ | ------------------------ |
| — | contenido del Form Item |
| label | contenido de la etiqueta |
### Form-Item Methods
### Form-Item Metodo
| Method | Description | Parameters |
| ---- | ---- | ---- |
| resetField | reset current field and remove validation result | — |
