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:
    1
    <!-- fieldAwesome.vue -->
    2
    <template>
    3
    <input
    4
    class="form-control"
    5
    type="text"
    6
    v-model="value"
    7
    :disabled="disabled"
    8
    :maxlength="schema.max"
    9
    :placeholder="schema.placeholder"
    10
    :readonly="schema.readonly" >
    11
    </template>
    12
    13
    <script>
    14
    import { abstractField } from "vue-form-generator";
    15
    16
    export default {
    17
    mixins: [ abstractField ]
    18
    };
    19
    </script>
    Copied!
    2.
    Register the new field as a global components. Registered name must validate this RegExp: (field)[A-Z][A-z]*.
    1
    /* main.js */
    2
    import Vue from "vue";
    3
    import VueFormGenerator from "vue-form-generator";
    4
    5
    // Register my awesome field
    6
    import fieldAwesome from "./fieldAwesome.vue";
    7
    Vue.component("fieldAwesome", fieldAwesome);
    8
    9
    Vue.use(VueFormGenerator);
    Copied!
    3.
    Last step is to use it in your schema
    1
    var schema: {
    2
    fields: [{
    3
    type: "awesome",
    4
    label: "Awesome (custom field)",
    5
    model: "userName"
    6
    }]
    7
    };
    Copied!
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 !
Last modified 1yr ago
Copy link