vue-form-generator es una librería de Vue.js que nos permite generar formularios a partir de un esquema previamente definido. Es decir, en lugar de escribir el código HTML de los formularios los generamos definiendo los campos que queremos tener en un objeto de JavaScript. Veamos cómo usar esta librería a continuación:
Instalación
Para instalar vue-form-generator debemos ejecutar el siguiente comando de npm en la terminal:
npm install vue-form-generator
Luego de realizar la instalación debemos importar el componente. Esto lo podemos hacer de forma global;
import VueFormGenerator from "vue-form-generator"; Vue.use(VueFormGenerator);
o de forma local:
import VueFormGenerator from "vue-form-generator";
export default {
components: {
"vue-form-generator": VueFormGenerator.component
}
};
Generando formularios
vue-form-generator acepta tres props como argumentos:
schemadonde definimos el esquema de nuestro formulario.modelun modelo con datos para nuestro formulario.optionsque acepta diferentes opciones de configuración.
Definiendo un esquema
schema es un objeto que a su vez contiene un arreglo de objetos llamado fields. Cada objeto dentro de fields es un campo de nuestro formulario:data: {
schema: {
fields: [{
type: "input",
inputType: "text",
label: "Name",
model: "name",
placeholder: "Your name",
featured: true,
required: true
}]
}
}
Observa como cada propiedad de fields hace referencia a una propiedad HTML. Por ejemplo:
- En
typedefinimos el elemento. - En
inputTypedefinimos el tipo del elemento (text,email,passwordetc). - En
labeldefinimos el valor de la etiqueta<label>del elemento. - En
modelhacemos referencia a una propiedad dentro del objetomodelpara definir un valor por defecto o enlazar el campo a una propiedad endata.
Puedes ver como simplemente debemos definir el valor de la propiedad. Por ejemplo, para un campo de tipo texto, con un placeholder de «Nombre», una etiqueta de «Escribe tu nombre» y requerido escribiriamos el siguiente HTML:
<label for="nombre">Escribe tu nombre</label> <input type="text" id="nombre" placeholder="Nombre" required>
Para generalo con vue-form-generator simplemente debemos escribir el siguiente esquema:
schema: {
fields: [{
type: "input",
inputType: "text",
label: "Escribe tu nombre",
placeholder: "Nombre",
required: true
}]
}
Luego simplemente debemos llamar a vue-form-generator desde nuestra plantilla:
<vue-form-generator :schema="schema"></vue-form-generator>
Agregando datos por defecto
Utilizando el prop model podemos pasar datos por defecto a nuestro formulario. Para ello, dentro de data debemos agregar un objeto model que luego enlazaremos al componente <vue-form-generator>:
data: {
model: {
id: 1,
name: "John Connor",
password: "123456",
active: true
}
}
Hecho esto, dentro del esquema debemos hacer referencia al modelo:
schema: {
fields: [{
type: "input",
inputType: "text",
label: "Escribe tu nombre",
// Hacemos referencia a la propiedad name de model
model: "name",
placeholder: "Nombre",
required: true
},{
type: "input",
inputType: "password",
label: "Contraseña",
// Hacemos referencia a la propiedad password de model
model: "password",
min: 6,
required: true
}]
}
Opciones de configuración
Mediante la prop options podemos pasar tres diferentes opciones de configuración:
validateAfterLoadque ejecuta una validación luego de que el modelo sea cargado.validateAfterChangedque ejecuta una validación luego de cada cambio.fieldIdPrefixque permite indicar un prefijo para cada propiedadidde los campos del formulario.
Estas propiedades son opcionales y las definimos agregando el objeto options en data:
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true,
fieldIdPrefix: 'user-'
}
validateAfterLoad y validateAfterChanged aceptan un booleano como valor. fieldIdPrefix acepta una cadena de texto como valor.
Otros campos de formulario
Además de input podemos generar los siguientes campos:
checkboxchecklistlabelradiosselectsubmittextArea
Al utilizar un campo de tipo input se debe especificar el tipo de campo con inputType. Esto no es necesario cuando utilizamos otro tipo de campos, como select o checkbox.
Para utilizar alguno de estos campos simplemente debemos agregarlo al objeto fields:
fields: [{
type: "select",
label: "Movie",
model: "movie",
values: ["The Terminator", "Judgment Day", "Rise of the Machines"]
},{
type: "checkbox",
label: "Status",
model: "status",
default: true
}]
Grupos de formularios
Podemos generar grupos de formularios que son campos agrupados dentro de una etiqueta fieldset con una etiqueta legend como título. Para ello agregamos un arreglo de objetos llamado groups a schema y dentro de este definimos nuestros grupos que a su vez son un objeto con las propiedades legend y fields:
schema: {
groups: [{
legend: "Detalles",
fields: [{
type: "input",
inputType: "text",
label: "Nombre",
model: "name"
},
{
type: "input",
inputType: "number",
id: "age",
label: "Edad",
model: "age"
}]
}]
}
En groups podemos agregar tantos grupos como queramos.
Personalizar los mensajes de validación
Para personalizar los mensajes de validación que vienen por defecto con vue-form-generator extendemos desde validators.string en la propiedad validator, donde indicamos los mensajes que queremos modificar:
{
type: "input",
inputType: "password",
label: "Contraseña",
model: "password",
min: 6,
required: true,
validator: VueFormGenerator.validators.string.locale({
fieldIsRequired: "Ingresa una contraseña.",
textTooSmall: "La contraseña debe tener al menos 6 caracteres."
})
}
fieldIsRequired hace referencia a la propiedad required y textTooSmall hace referencia a la propiedad min.
Espero que te haya resultado útil este tutorial, donde aprendimos a generar formularios en Vue.js mediante un esquema utilizando la librería vue-form-generator. En el material relacionado puedes encontrar el repositorio de Github de la librería.
Material relacionado
- Curso de Vue 2
- Libro: La Elegancia de Vue.js
- Curso de Testing con Vue.js 2
- Repositorio de Github de vue-form-generator
No olvides seguirnos en Twitter y suscribirte a nuestro boletín:
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
