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
exportdefault{
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 !