vuetify-dynamic-form (Vue 2)
Defining and creating form components and their validation can be tedious and repetitive. This package allows you to dynamically define form inputs with configurable options.
💚 Features
- Dynamically create form input fields
- Two-way binded form data. Useful when using forms in update context and the implementing component may update/provide the initial data
- vee-validate v3 validation
- Slots to customise field components
- Flexible configuration for validation, auto-grouping, component props, etc.
Installation
npm i --save @moirei/vuetify-dynamic-form
# or yarn add @moirei/vuetify-dynamic-form
Usage
import Vue from 'vue'
import VDynamicForm from '@moirei/vuetify-dynamic-form'
import CustomComponent from './CustomComponent'
Vue.use(VDynamicForm)
// Or with options
Vue.use(VDynamicForm, {
interactionMode: "aggressive",
})
new Vue({}).$mount('#app')
// then inside your vue components
export default Vue.extend({
data: () => ({
form: {},
inputs: {
first_name: {
name: "First Name",
rules: "required|max:24",
type: "text",
line: 1,
props: {
filled: true,
},
},
last_name: {
name: "Last Name",
rules: "max:24",
component: "v-text-field", // Use a compnent name
line: 1,
props: {
filled: true,
},
},
address: {
name: "Address",
component: CustomComponent, // Use a component
props: {
filled: true,
},
},
},
})
})
<template>
<v-dynamic-form v-model="form" :input-fields="inputs" />
</template>
API
Props
Name | Required? | Default | Type | Description |
---|---|---|---|---|
value |
yes | string |
The v-model input prop |
|
hide-name |
no | false |
boolean |
Whether to hide input name displayed above the component field |
loading |
no | false |
boolean |
Indicates the form or its data is in loading state. All inputs are disabled if true. |
readonly |
no | false |
boolean |
Sets all inputs to readonly |
disabled |
no | false |
boolean |
Disables all inputs |
disable-object-rewrite |
no | false |
boolean |
Do not clone and emit new object for form data. When enabled, field input property is updated on the form data and the input event is not fired. |
hide-actions |
no | false |
boolean |
Hides the SUBMIT and CLEAR actions |
defaults |
no | {} |
object |
Default form values to prepopulate the inputs with |
interaction-mode |
no | string |
Set the default interaction mode for all inputs | |
input-fields |
yes | object |
The dynamic form fields | |
nested-fields |
no | false |
boolean |
Allow nested fields. When true, field names like "address.line1" will be saved as property line1 in object address within the form data. To use array as nested key, use the key field option. |
valid |
no | boolean |
Form validation state. Use with valid.sync . |
Field options
Field | Default | Type | Description |
---|---|---|---|
col |
object |
Props to bind to v-col with multiple fields in one line |
|
component |
string |Component
|
||
hideName /hide-name
|
false |
boolean |
Hide the input display name |
key |
Field key | string |
string[] |
props |
object |
Input component props | |
rules |
string |array
|
Vee-validate rules | |
type |
Uses <input > tag if empty and component is also empty. |
string |
Vuetify input types. Valid values: text , select , checkbox , slider , range-slider , switch , textarea and radio
|
mode |
aggressive |
string |
Vee-validate mode |
name |
Field key | string |
The input display name |
vid |
Field key | string |
Input field validation ID |
Plugin options
Field | Default | Type | Description |
---|---|---|---|
interactionMode |
"aggressive" |
string |
Configure global default interaction mode |
Events
Name | Description |
---|---|
input |
The v-model input event |
submit |
Emitted when the form is validated and submitted. |
update:valid |
The valid.sync prop event |
Slots
Name | Description | Props |
---|---|---|
field:validation:{field} |
Use to override an input at the validation-provider level. | { field } |
field:{field} |
Use to override an input at the component level. | { ...field, invalid, errors } |
actions |
Use to override the default SUBMIT and CLEAR actions | { submit, clear, invalid } |
Functions
Name | Description |
---|---|
submit |
Validates and emits submit event if valid |
clear |
Resets the form data and validation states |
reset |
Reset the validation observer |
validate |
Validates all inputs and child forms |
Classes
Name | Description |
---|---|
v-dynamic-form |
The components class |
v-dynamic-form--inputs |
The class group for all inputs |
v-dynamic-form--actions |
The class group for the default actions |
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Changelog
Please see CHANGELOG.