Generate a responsive vue form with validation, from an array
All fields are required and input text by default. Once submitted, an event 'formSubmitted' is emitted on $root with the formName and all values.
- Generate a form from json / array (formFields props)
- Bulma classes by default (that can be overwritten)
- Responsive
- Fields on multiples columns
const formFields = [ [{ label: 'label one' }, { label: 'label two' }] ]
- Pre filled values
const formFields = [{ label: 'the label', value: 'the value' }]
- Simple rules validation
const formFields = [{ label: 'the label', rules: { is_not: 'label' } }]
- Cross field validation
- Custom attr (class, data-*, ...) on .field & real fields (input, textarea...)
const formFields = [{ attr: { class: 'classOnInput' }, alternativeLabel: 'an alternative label text that will be displayed', field: { attr: { class: 'classOnFieldClassName' } }, label: 'the label' }]
- Named slot everywhere inside form
const formFields = [{ slot: 'nameOfTheSlot' }]
- Html directly inside json (formFields props)
const formFields = [{ html: '<p>Your html content</p>' }]
yarn add vue-form-json vee-validate bulma @fortawesome/fontawesome-free
#fontawesome is not needed if hasIcon props is false
// main.js
import { extend, ValidationProvider } from 'vee-validate'
import * as rules from 'vee-validate/dist/rules'
import { messages } from 'vee-validate/dist/locale/en.json'
// ...
Vue.component('ValidationProvider', ValidationProvider)
Object.keys(rules).forEach(rule => {
extend(rule, {
...rules[rule],
message: messages[rule]
})
})
// ...
<template lang="pug">
#app.section
form-json(:formFields="jsonFields",
:formName="'userProfil'"
:btnSubmit="{value: 'Submit'}",
:btnReset="{value: 'Reset'}")
div(slot="slotNameAddedInJsonFields")
p Your slot content
</template>
<script>
import formJson from 'vue-form-json'
import jsonFields from './../assets/fields'
export default {
name: 'app',
components: {
formJson
},
data: () => ({
jsonFields
}),
mounted () {
this.$root.$on('formSubmitted', values => alert(JSON.stringify(values)))
}
}
</script>
<style lang="stylus">
@require '../node_modules/bulma/css/bulma.min.css'
@require '../node_modules/@fortawesome/fontawesome-free/css/all.min.css'
@require '../node_modules/vue-form-json/dist/vue-form-json.css'
</style>
props: {
formFields: {
type: Array,
required: true
},
formName: {
type: String,
required: true
},
mandatoryAsteriskLegend: {
type: String,
default: '* field required'
},
btnSubmit: {
type: Object,
default: () => ({})
},
btnReset: {
type: Object,
default: () => ({})
},
resetFormAfterSubmit: {
type: Boolean,
default: false
},
defaultMin: {
type: [Boolean, Number],
default: false
},
defaultMax: {
type: [Boolean, Number],
default: false
},
defaultMinValue: {
type: [Boolean, Number],
default: 0
},
defaultMaxValue: {
type: [Boolean, Number],
default: false
},
hasIcon: {
type: Boolean,
default: true
}
}