Banner generar formularios con vue-form-generator

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:

  • schema donde definimos el esquema de nuestro formulario.
  • model un modelo con datos para nuestro formulario.
  • options que 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 type definimos el elemento.
  • En inputType definimos el tipo del elemento (text, email, password etc).
  • En label definimos el valor de la etiqueta <label> del elemento.
  • En model hacemos referencia a una propiedad dentro del objeto model para definir un valor por defecto o enlazar el campo a una propiedad en data.

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:

  • validateAfterLoad que ejecuta una validación luego de que el modelo sea cargado.
  • validateAfterChanged que ejecuta una validación luego de cada cambio.
  • fieldIdPrefix que permite indicar un prefijo para cada propiedad id de los campos del formulario.

Estas propiedades son opcionales y las definimos agregando el objeto options en data:

formOptions: {
    validateAfterLoad: true,
    validateAfterChanged: true,
    fieldIdPrefix: 'user-'
}

validateAfterLoadvalidateAfterChanged 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:

  • checkbox
  • checklist
  • label
  • radios
  • select
  • submit
  • textArea

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 requiredtextTooSmall 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

No olvides seguirnos en Twitter y suscribirte a nuestro boletín:

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.