form-create is a form generation component that can generate dynamic rendering, data collection, validation, and submission through JSON. Supports three UI frameworks and any Vue component generation. Built-in 20 common form components and custom components, even more complex forms can be easily completed.

File | GitHub | Example

Supporting UI

• element-ui
• iview/view-design
• ant-design-vue

New features

Version 2.5 mainly updates the following functions:

• Refactoring internal core code
• Optimize internal rendering mechanism
• Optimize internal life cycle events
• Refactoring TypeScript
• New nextTick method to set callback after rendering
• New Paging Loading Component to Accelerate First Screen Rendering
• Add custom configuration item effect
• Add Support to Modify type
• Added control to support configuration rule insertion location
• Optimizing control s will take effect if they meet the criteria. Previous versions will only take effect for the first
• New support for configuring prefix prefix, suffix for components
• New update configuration, triggered after value sends changes
• Add a new wrap configuration item to configure FormItem
• New object Component
• New support for custom title,info component
• New Rich Text Component wangEditor
• New Native Event Support Event Injection
• Support value.sync Gets Bidirectional Binding formData
• Optimize the default form submission button

install

Install the appropriate version based on the UI you use

element-ui version

npm i @form-create/element-ui

iview@2.x Version |3.x

npm i @form-create/iview

iview/view-design@4.x Edition

npm i @form-create/iview4

ant-design-vue@1.5+ Edition

npm i @form-create/ant-design-vue

Get started quickly

This paper takes element-ui as an example

1. In main. Write the following in js:

import Vue from 'vue'
import ELEMENT from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import formCreate from '@form-create/element-ui'

Vue.use(ELEMENT)
Vue.use(formCreate)

1. Generate Form

Online examples

<template>
  <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>

export default {
    data() {
        return {
            //Instance object
            fApi: {},
            //Form Data
            value: {},
            //Form Generation Rules
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: 'Commodity Name'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: 'Creation Time'
                }
            ],
            //Component parameter configuration
            option: {
                //Form Submission Events
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

Rule introduction

type

• Type: String
• Description: Set the name of the build component

field

• Type: String
• Description: Set the field name of the form component so that the custom component can not be configured

title

• Type: String|Object
• Description: Name of component

value

• Type: any
• Description: Form component field values, custom components can be set without

props

• Parameter: Object
• Description: Set props for components

info

• Type: String|Object
• Description: Set prompts for components

hidden

• Type: Bool
• Description: Set whether the component renders

prefix

• Type: string|Object
• Description: Set the prefix of the component

suffix

• Type: string|Object
• Description: Set the suffix of a component

validate

• Type: Array
• Description: Set validation rules for form components

options

• Type: Array
• Description: Set radio,select,checkbox and other component option s

col

• Type: Object
• Description: Set layout rules for components

control

• Type: Object
• Description: Control the display of other components

children

• Type: Array<rule|string|maker>

• Description: Set the slot of the parent component, default by default. Can be used with slot configuration items

  • Example 1

  formCreate.maker.create('button').children([
     'Button Content' 
  ])
  

  • Example 2

  maker.input('text','text','text').children([
      maker.create('span').children(['append']).slot('append')
  ])
  

  • Example 3

  formCreate.maker.create('i-row').children([
    formCreate.maker.create('i-col').props('span',12).children([
      formCreate.maker.template('<span>Custom Components</span>',new Vue)
    ]),
  ])
  

Functional introduction

1. Custom Components

form-create supports generating any vue component within a form

Online examples

For example, generate an el-button component:

{
	//A type can be a built-in component name, a vue component name, or an html tag
	type: 'el-button',
   	//...
	children: ['Button Content']
}

Generate an html tag

{
	//A type can be a built-in component name, a vue component name, or an html tag
	type: 'span',
   	//...
	children: ['span content']
}

Be careful! Generated components must be mounted globally or through form-create

Mount via Vue

Vue.component(component.name, component);

Mount through form-create

formCreate.component(component.name, component);

2. Custom Layout

Layout components by setting the configuration item col or raster component

Online examples

Set the component layout by configuring the item col to display two components in one row

[
	{
        type:'input',
        field:'input1',
        title:'input1',
        col:{span:12}
	},{
        type:'input',
        field:'input2',
        title:'input2',
        col:{span:12}
	},
]

Setting up a row to display three components through a raster component

{
	type:'el-row',
   	children: [
    	{
        	type:'el-col',
        	props:{
            	span:8
        	},
        	children: [{type:'input',field:'input1',title:'input1'}]
        },
    	{
        	type:'el-col',
        	props:{
            	span:8
        	},
        	children: [{type:'input',field:'input1',title:'input1'}]
        },
    	{
        	type:'el-col',
        	props:{
            	span:8
        	},
        	children: [{type:'input',field:'input1',title:'input1'}]
        }
    ]
}

3. Component prefix and suffix

Configure the component's prefix by generating the prefix property of the rule, and the suffix property by configuring the component's suffix

Online examples

{
    type:'input',
    field:'text',
    title:'text',
    prefix:'prefix',
    suffix:'suffix',
}

Set prefix and suffix to custom components

{
    type:'input',
    field:'text',
    title:'text',
    value:'default',
    prefix:{
        type:'ElButton', children:['prefix']
    },
    suffix:{
        type:'ElButton', children:['suffix']
    },
}

4. Component Linkage

Controlling the display of other components through their values is possible through the control configuration item

Online examples

For example, enter the reason for the poor rating when the rating is less than 3 stars

{
    type:'rate',
    field: 'star',
    title:'score',
    value:5,
    control:[
        {
            handle(val){
                return val < 3
            },
            rule:[
                {
                    type:'input',
                    field:'info',
                    title:'Reason for poor assessment',
                    value:'default info', 
                } 
            ]   
        }                                              
    ]
}

parameter	Explain	type
value	Display the components in rule when their values and values are equal	string|Number|Bool
handle	Show the components in rule when the handle method returns true	Function
rule	This component controls the components displayed	Array
append	Set the location of rule append in rule	string
prepend	Set the position of rule preceding insert in rule	string
child	Sets whether rule is inserted into the child ren of the specified location, and is added to the child ren of the current rule by default	Boolean

Be careful! handle priority is greater than value, all eligible control s will take effect

5. Form validation

validate configuration items allow you to set validation rules for components, and custom form components also support validation

Online examples

For example, setting the input component required

{
	type:'input',
	//...
	validate:[{required:true, type:'string', message:'Please enter something'}]
}

parameter	Explain	type	Default value
enum	Enumeration Type	string	-
len	Field Length	number	-
max	Maximum length	number	-
message	Verify Copy	string	-
min	Minimum length	number	-
pattern	Regular Expression Check	RegExp	-
required	Is Required	boolean	false
transform	Convert field values before checking	function(value) => transformedValue:any	-
type	Built-in check type, Optional	string	'string'
validator	Custom Check	function(rule, value, callback)	-
whitespace	Whether spaces are treated as errors when required	boolean	false

Be careful! Type needs to be defined based on the value type of the component

Introduction to APi

The following are common methods

A complete introduction to Api

Set Form Values

Override, undefined fields are set to null

type coverValue = (formData:{[field:string]:any}) => void

• Usage:

fApi.coverValue({goods_name:'HuaWei'})

Merge method, undefined fields are not modified

interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}

• Usage:

fApi.setValue({goods_name:'HuaWei'})

Alias method changeValue, changeField

Hide Fields

interface hidden {
    //Hide all components
    (status:Boolean):void
    //Hide specified components
    (status:Boolean, field:string):void
    //Hide some components
    (status:Boolean, field:string[]):void 
}

• Usage:

fApi.hidden(true, 'goods_name')

Get Component Hidden State

type hiddenStatus = (field:string)=>Boolean

• Usage:

const status = fApi.hiddenStatus('goods_name')

Get Rules

interface getRule {
    (field:string):Rule
    (field:string, origin: true): FormRule
}

• Usage:

const rule = fApi.getRule('goods_name')

Insert Rule

Pre-insert

interface prepend {
    //Insert to First
    (rule:FormRule):void 
    //Insert before specified field
    (rule:FormRule, field:string):void
    //Insert into the specified field children
    (rule:FormRule, field:string, child:true):void
}

• Usage:

fApi.prepend({
     type:"input",
     title:"Introduction to Commodities",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "Please enter the product description",
     },
     validate:[
         { required: true, message: 'Please enter the product description', trigger: 'blur' },
     ],
}, 'goods-name')

Post-append

interface append {
    //Insert last
    (rule:FormRule):void 
    //Insert after specified field
    (rule:FormRule, field:string):void
    //Insert into the specified field children
    (rule:FormRule, field:string, child:true):void
}

• Usage:

fApi.append({
     type:"input",
     title:"Introduction to Commodities",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "Please enter the product description",
     },
     validate:[
         { required: true, message: 'Please enter the product description', trigger: 'blur' },
     ],
}, 'goods-name')

Delete the specified rule

type removeRule = (rule:FormRule) => FormRule

• Usage:

const rule = {type:'input', /** ... **/}
fApi.removeRule(rule)

validate form

type validate = (callback:(...args:any[]) => void)=> void

• Usage:

fApi.validate((valid, fail) => {
    if(valid){
        //todo form validation passed
    }else{
        //todo form validation failed
    }
})

Verify the specified field

type validateField = (field, callback:(...args:any[]) => void)=> void

• Usage:

fApi.validateField('goods_name', (valid, fail) => {
    if(valid){
        //todo field validation passed
    }else{
        //todo field validation failed
    }
})

Get Form Data

interface formData {
    //Get all the data
    (): {[field:string]:any }
    //Get data for some fields
    (field:string[]): {[field:string]:any }
}

• Usage:

const formData = fApi.formData()

Modify Submit Button

type submitBtnProps = (props:Object) => void

• Usage:

fApi.submitBtnProps({disabled:true})

• Shortcut operations:

  • FApi. Btn. Load (true) Set the submit button to load state
  • fApi.btn.disabled(true) sets the submit button disabled state
  • fApi.btn.show(true) Set the submit button display status

Modify Reset Button

type resetBtnProps = ( props:Object) => void

• Usage:

fApi.resetBtnProps({disabled:true})

• Shortcut operations:

  • FApi. ResetBtn. Load (true) Set the reset button to enter the loading state
  • fApi.resetBtn.disabled(true) set reset button disable state
  • fApi.resetBtn.show(true) Set the reset button display status

Hide Form

type hideForm = (hide:Boolean)=>void

• Usage:

fApi.hideForm(true)

Submit Form

type submit = (success: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void

• Usage:

fApi.submit((formData, fapi) => {
    //todo submit form
},()=>{
    //todo form validation failed
})

If it helps you, you can GitHub Thank you for your support!