Generate a 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 an array (formFields prop)
- 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 (see password confirmation example in the CodeSandbox link)
- 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' }]
- Scoped slot support everywhere inside the form
const formFields = [{ slot: 'nameOfTheSlot', props: { foo: 'bar' } }]
- Custom fields support
-
for a simple field (with
is
attribute +components
prop)const formFields = [{ is: 'CustomFieldName' }]
-
inside a scoped slot for more flexibility
<template #nameOfTheSlot="{ foo, updateFormValues, isFormReseted }">
-
- Html support
const formFields = [{ html: '<p>Your html content</p>' }]
yarn add vue-form-json
# Optional: bulma @fortawesome/fontawesome-free (fontawesome is not needed if hasIcon prop 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(:btnReset="{value: 'Reset'}",
:btnSubmit="{value: 'Submit'}",
:formFields="jsonFields",
formName="userProfil")
template(#slotNameAddedInJsonFields="{ prop }")
p Your slot content and {{ prop }}
</template>
<script>
// import 'bulma/css/bulma.min.css'
// import '@fortawesome/fontawesome-free/css/all.min.css'
// import 'vue-form-json/dist/vue-form-json.css'
import formJson from 'vue-form-json'
import jsonFields from './../assets/fields'
export default {
name: 'app',
components: {
formJson
},
mounted () {
this.$root.$on('formSubmitted', values => console.log(values))
},
computed: {
jsonFields: () => jsonFields
}
}
</script>
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
},
camelizePayloadKeys: {
type: Boolean,
default: false
},
components: {
type: Object,
default: () => ({})
},
}