1.3.6 • Published 2 years ago
Share package 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.
:green_heart: 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 validationSlots 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-formUsage 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 valueyes stringThe v-model input prop hide-nameno falsebooleanWhether to hide input name displayed above the component field loadingno falsebooleanIndicates the form or its data is in loading state. All inputs are disabled if true. readonlyno falsebooleanSets all inputs to readonly disabledno falsebooleanDisables all inputs disable-object-rewriteno falsebooleanDo 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-actionsno falsebooleanHides the SUBMIT and CLEAR actions defaultsno {}objectDefault form values to prepopulate the inputs with interaction-modeno stringSet the default interaction mode for all inputs input-fieldsyes objectThe dynamic form fields nested-fieldsno falsebooleanAllow 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. validno booleanForm validation state. Use with valid.sync.
Field options Field Default Type Description colobjectProps to bind to v-col with multiple fields in one line componentstring|ComponenthideName/hide-namefalsebooleanHide the input display name keyField key stringstring[]Specify the field key in the form data propsobjectInput component props rulesstring|arrayVee-validate rulestypeUses <input > tag if empty and component is also empty. stringVuetify input types. Valid values: text, select, checkbox, slider, range-slider, switch, textarea and radio modeaggressivestringVee-validate mode nameField key stringThe input display name vidField key stringInput field validation ID
Plugin options Field Default Type Description interactionMode"aggressive"stringConfigure global default interaction mode
Events Name Description inputThe v-model input event submitEmitted when the form is validated and submitted. update:validThe 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 }actionsUse to override the default SUBMIT and CLEAR actions { submit, clear, invalid }
Functions Name Description submitValidates and emits submit event if valid clearResets the form data and validation states resetReset the validation observer validateValidates all inputs and child forms
Classes Name Description v-dynamic-formThe components class v-dynamic-form--inputsThe class group for all inputs v-dynamic-form--actionsThe 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 .
Credits License MIT