Custom fields

If you are not satisfied with the available field, you can create your own custom fields.
There is only a few steps:

  1. These custom fields are like any custom components expect the need to use VueFormGenerator.abstractField as a mixins:

    <!-- fieldAwesome.vue -->
    <template>
        <input 
            class="form-control" 
            type="text" 
            v-model="value" 
            :disabled="disabled"
            :maxlength="schema.max"
            :placeholder="schema.placeholder"
            :readonly="schema.readonly" >
    </template>
    
    <script>
       import { abstractField } from "VueFormGenerator";
    
       export default {
             mixins: [ abstractField ]
       };
    </script>
    
  2. Register the new field as a global components. Registered name must validate this RegExp: (field)[A-Z][A-z]*.

     /* main.js */
     import Vue from "vue";
     import VueFormGenerator from "VueFormGenerator";
    
     // Register my awesome field
     import fieldAwesome from "./fieldAwesome.vue";
     Vue.component("fieldAwesome", fieldAwesome);
    
     Vue.use(VueFormGenerator);
    
  3. Last step is to use it in your schema

    var schema: {
       fields: [{
           type: "awesome",
           label: "Awesome (custom field)",
           model: "userName"
       }]
    };
    

If you decide to release your custom field into the wild, please open a new issue so we can add you to a list on the README.
Please try to use this naming convention for your custom field : vfg-field-*
Exemple :

  • vfg-field-myfield
  • vfg-field-calendar
  • vfg-field-awesome-dropdown

This way, it will be easier for everyone to find it. Thank you !

results matching ""

    No results matching ""