@@ -324,14 +324,16 @@ Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox
...
@@ -324,14 +324,16 @@ Incluye todo tipo de entradas, tales como `input`, `select`, `radio` y `checkbox
}
}
</script>
</script>
```
```
:::
:::
:::tip
:::tip
[W3C](https://www.w3.org/MarkUp/html-spec/html-spec_8.html#SEC8.2) reglamenta que
[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>
> <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>
Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
Para prevenir este comportamiento, puede agregar `@submit.native.prevent` on `<el-form>`.
:::
:::
### Formulario inline
### Formulario inline
...
@@ -372,6 +374,7 @@ Cuando el espacio vertical es limitado y la forma es relativamente simple, puede
...
@@ -372,6 +374,7 @@ Cuando el espacio vertical es limitado y la forma es relativamente simple, puede
}
}
</script>
</script>
```
```
:::
:::
### Alineamiento
### Alineamiento
...
@@ -413,6 +416,7 @@ Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento
...
@@ -413,6 +416,7 @@ Dependiendo de su diseño, hay varias maneras diferentes de alinear el elemento
}
}
</script>
</script>
```
```
:::
:::
### Validación
### Validación
...
@@ -528,6 +532,7 @@ El componente `form` le permite verificar sus datos, ayudándole a encontrar y c
...
@@ -528,6 +532,7 @@ El componente `form` le permite verificar sus datos, ayudándole a encontrar y c
}
}
</script>
</script>
```
```
:::
:::
### Reglas personalizadas de validación
### Reglas personalizadas de validación
...
@@ -627,6 +632,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
...
@@ -627,6 +632,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
}
}
</script>
</script>
```
```
:::
:::
### Eliminar o agregar validaciones dinamicamente
### Eliminar o agregar validaciones dinamicamente
...
@@ -705,6 +711,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
...
@@ -705,6 +711,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
}
}
</script>
</script>
```
```
:::
:::
### Validación numerica
### Validación numerica
...
@@ -755,6 +762,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
...
@@ -755,6 +762,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
}
}
</script>
</script>
```
```
:::
:::
:::tip
:::tip
...
@@ -831,12 +839,13 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
...
@@ -831,12 +839,13 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
};
};
</script>
</script>
```
```
:::
:::
### Form Atributos
### Form Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| 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)) |
| 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)) |
| 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 | — |
| 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)
| 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) |
| 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. |
| 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
### Form-Item Atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| 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` | |
| 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 | etiqueta | string | — | — |
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
| label-width | ancho de la etiqueta, e.g. '50px' | string | — | — |
...
@@ -879,19 +889,21 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
...
@@ -879,19 +889,21 @@ Todos los componentes de un formulario heredan su atributo `size`. De manera sim
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
| size | Tamaño de los componentes en este form item | string | medium / small / mini | - |
| type | tipo de input | string | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text |
| type | tipo de input | string | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text |
| value | valor enlazado | string / number | — | — |
| value | valor enlazado | string / number | — | — |
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
...
@@ -634,7 +645,7 @@ Búsqueda de datos desde el servidor.
...
@@ -634,7 +645,7 @@ Búsqueda de datos desde el servidor.
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | igual que `autocomplete` en el input nativo | string | on/off | off |
| autocomplete | igual que `autocomplete` en el input nativo | string | on/off | off |
| auto-complete | @DEPRECATED in next major version | string | on/off | off |
| auto-complete | @DEPRECATED en el proximo cambio mayor de version | string | on/off | off |
| name | igual que `name` en el input nativo | string | — | — |
| name | igual que `name` en el input nativo | string | — | — |
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
| max | igual que `max` en el input nativo | — | — | — |
| max | igual que `max` en el input nativo | — | — | — |
...
@@ -658,7 +669,7 @@ Búsqueda de datos desde el servidor.
...
@@ -658,7 +669,7 @@ Búsqueda de datos desde el servidor.
|fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
| fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
| popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
| popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
| trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
| trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
| name | igual que `name` en el input nativo | string | — | — |
| name | igual que `name` en el input nativo | string | — | — |
...
@@ -706,13 +717,13 @@ Atributo | Descripción | Tipo | Opciones | Por defecto
...
@@ -706,13 +717,13 @@ Atributo | Descripción | Tipo | Opciones | Por defecto