Create dynamic forms with vue based on a json configuration

Last update: Apr 19, 2020

Dynamic forms

Table of Contents

create dynamic forms with vue based on a json configuration

Documetation

Form

Parameters

  • inputs Array A list of all the required form fields with initial values form more info see the params section
  • request Object A object containing an optional the configuration for the requests (optional)
    • request.headers Headers A Javascript Headers object containing custom headers (optional)
    • request.credentials String set credentials option in the request (optional) default value='omit'
    • request.url String The url which the form will be send to (optional) default value = ''(self)
    • request.method String The method of the request (optional) default value = 'post'
  • config Object the configuration of the whole form

data

groups all form values in a formData object

Returns FormData data - a FormData object containing all form values

reset

Resets all values in the form + clears the errors

submit

Submit the form with the current values

Returns Promise promise based on the succes or failure of a request done with the fetch API

onFail

Sets the Errors of the form

Parameters

  • errors Array An array containing error objects

Input

an input object in the inputs array

Parameters

  • input Object an input configuration

    • input.type String (Required) - The type of input supported input types: text,email,password,hidden,tel,date,number,select,textarea
    • input.name String (Required) - The name of the input field
    • input.value (Optional) - The value of the input field
    • input.label String (Optional) - The label of the input field
    • input.class String (Optional) - The Css class(es) of the input field

    Input specific parameters

    • input.min minimum value of the input field(date,number)
    • input.max maximum value of the input field(date,number)
    • input.step Number increments of the value on increase & decrease(number)
    • options Array all the options in a selectbox

Errors

has

Check if an error exists

Parameters

  • field String the name of the field you are looking for

any

Check if there are any Errors

Returns Boolean boolean

get

get an Error for a particular field

Parameters

  • field String the name of the field you are looking for

Returns any if exists returns the error else returns false

set

Sets the error Object

Parameters

  • Errors errors
  • err

clear

Clear all the erros

Example

add the component to the components section of your Vue component

demo.vue

">
<template>
<div>
	<!-- 
		custom html element
		custom atribute formdata is required
	 -->
	<dynamic-form :formdata="formdata">

Configuration

configuration in the config.js file

export fuction createDemo(){

	return {
		//request options 	
		request:{
			//post url
			url:'/register',
			//method
			method:'post',
			//adding the CSRF Token for laravel applications
			headers:new Headers({
				'X-CSRF-TOKEN':window.Laraval.csrfToken
			}),
			//include credentials
			credentials:'include'
		},
		//title
		title:'Demo Form'
		//text of the submit button
		submitText:'Register',
		//inputs
		inputs:[
			{
				type:'text',
				label:'Firtsname',
				name:'firstname',
				class:'form-control',
				value:''
			},
			{
				type:'text',
				label:'Lastname',
				name:'lastname',
				class:'form-control',
				value:''
			},
			{
				type:'email',
				label:'Email',
				name:'email',
				class:'form-control',
				value:''
			},
			{
				type:'password',
				label:'Password',
				name:'password',
				class:'form-control',
				value:''
			},
			{
				type:'password',
				label:'Confirm password',
				name:'password_confirmation',
				class:'form-control',
				value:''
			},
			{
				type:'date',
				label:'Date of birth',
				name:'dateofbirth',
				class:'form-control',
				value:''
			},
			{
				type:'tel',
				label:'Telephone',
				name:'phone',
				class:'form-control',
				value:''
			},
			{
				type:'select',
				label:'Gender',
				name:'gender',
				class:'form-control',
				options:['male','female'],
				value:""
			},

		]
	}
}

GitHub

https://github.com/milandebuck/vue-dynamic-forms
You might also like...

Building forms with vue composition API.

Vue Hooks Form · Building forms with Vue composition API. The API is not stable and might change in the future. Docs Visit https://beizhedenglong.gith

May 23, 2022

A Vue widget for Howzit contact forms

howzit-vue A Vue widget for Howzit contact forms. Howzit There is a standalone server component available at UnicornGlobal/howzit that you can host yo

Jan 13, 2020

a vue form component just like json-editor

vue-awesome-form a vue form component just like json-editor Install # npm/yarn npm install vue-awesome-form yarn add vue-awesome-form Use register th

Feb 8, 2021

:clipboard: A schema-based form generator component for Vue.js

:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

Jul 4, 2022

This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework

Vue Form Components This package provides easy form wrappers for Vue2, based upon the Bootstrap v4 CSS Framework. There are a variety of components th

Feb 4, 2022

International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

Jun 28, 2022

A phone number input made with Vue JS (format & valid phone number)

A phone number input made with Vue JS (format & valid phone number)

vue-phone-number-input A beautiful text field to format phone numbers made with VueJS NEW VERSION ON MY NEW LIBRARY: MAZ-UI The new version of VuePhon

Jul 1, 2022

A reusable focus directive for reusable Vue.js components

vue-focus A reusable focus directive for reusable Vue.js components Overview It can be tricky to manage input focus. You always have to fall back to a

Mar 5, 2022

Vue autofocus directive

vue-autofocus-directive Autofocus directive for Vue About Lifted from the official Vue tutorial: https://vuejs.org/v2/guide/custom-directive.html When

May 10, 2022
Comments
  • 1. some problem with vue2.3.3

    Sorry, when using official demo, always throw some errors in console, but config Object can be logged [Vue warn]: Missing required prop: "config"

    found in

    ---> at D:\workspace\vue\my-first-app\node_modules\vue-dynamic-forms\src\dynamic-form.vue at D:\workspace\vue\my-first-app\src\components\SearchForm.vue at D:\workspace\vue\my-first-app\src\components\Source.vue at D:\workspace\vue\my-first-app\src\App.vue

    [Vue warn]: Error in data(): "TypeError: Cannot read property 'inputs' of undefined"

    found in

    ---> at D:\workspace\vue\my-first-app\node_modules\vue-dynamic-forms\src\dynamic-form.vue at D:\workspace\vue\my-first-app\src\components\SearchForm.vue at D:\workspace\vue\my-first-app\src\components\Source.vue at D:\workspace\vue\my-first-app\src\App.vue

    Did I miss someting

    Reviewed by IEfucker at 2017-07-03 06:45
Easy way to dynamically create reactive forms in Vue based on a varying business object model
Easy way to dynamically create reactive forms in Vue based on a varying business object model

Vue 3.x.x Dynamic Forms Implementing handcrafted forms can be: Costly Time-consuming Especially if you need to create a very large form, in which the

Jun 23, 2022
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort
Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Forms JSON-based Form builder for Laravel Enso This package can work independently of the Enso ecosystem. The front end implementation that utilizes t

Mar 9, 2022
Vue JSON form - 基于vue 通过 json 呈现视图

Vue JSON form 通过 JSON 呈现任何组件与定义脚本的实现 使用任何 Vue 组件或 html 元素构建视图 开发 vue 项目时,可能会遇到以下需求场景 界面以及交互行为需要通过配置动态呈现 定义的配置需要进行存储和读取 配置需要通过可视化界面进行编辑 普通 JSON 数据虽然可以描

Jun 16, 2022
Create a dynamic form usign a set of custom Vue.js components

Create a dynamic form usign a set of custom Vue.js components

Nov 24, 2017
Create conversational conditional-logic forms with Vue.js.
Create conversational conditional-logic forms with Vue.js.

Create conversational conditional-logic forms with Vue.js.

Jun 30, 2022
Vue dynamic nested form component, support nested Object/Hashmap/Array.
Vue dynamic nested form component, support nested Object/Hashmap/Array.

Introduction vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(referen

Jun 25, 2022
JavaScript powered forms for Vue.js

Vue Formly Looking for maintainers It's been many years since I first created Vue Formly and it's been a great project. However, it was a project that

Apr 1, 2022
⚡️ The easiest way to build forms with Vue.
⚡️ The easiest way to build forms with Vue.

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Jun 28, 2022
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Apr 8, 2022