The dynamic form form-create 2.5 version is released, help you easily get the form

Form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. It supports three UI frameworks and supports the generation of any Vue component. Built in 20 kinds of common form components and custom components, and then complex forms can be easily done.

Document | GitHub

Support 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 lifecycle events
• Refactoring `typescript`
• Add the `nextTick` method to set the callback after rendering
• New support for pagination loading component to accelerate first screen rendering
• Add custom configuration item `effect`
• Add support modify `type`
• Add `control` to support the insertion location of configuration rules
• Optimization `control` will take effect if it meets the conditions. The previous version can only take effect if it is the first one
• Add support to configure `prefixes` and `suffixes` to components
• Add `update` configuration, triggered after `value` sends changes
• Add support for `wrap` configuration item, configure `FormItem`
• Add `object` component
• Add support for custom `title`, `info` components
• Add rich text component `wangEditor`
• Add native event support event injection
• Support `value.sync` to get two-way binding `formData`
• Optimize the default form submit button

Install

Install the corresponding version according to the UI you use

element-ui version

npm i @form-create/element-ui

iview@2.x|3.x version

npm i @form-create/iview

iview/view-design@4.x version

npm i @form-create/iview4

ant-design-vue@1.5+ version

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

Quick Start

This article takes `element-ui` as an example

1. Write the following in main.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)

2. Generate form

example

<template>
  <div id="app1">
      <form-create v-model="fApi" :rule="rule" :option="option" :value.sync="value"></form-create>
  </div>
</template>
<script>
export default {
    data() {
        return {
            fApi: {},
            value: {},
            rule: [
                {
                    type: 'input',
                    field: 'goods_name',
                    title: 'goods_name'
                },
                {
                    type: 'datePicker',
                    field: 'created_at',
                    title: 'created_at'
                }
            ],
            option: {
                onSubmit: function (formData) {
                    alert(JSON.stringify(formData))
                }
            }
        }
    }
}

</script>

Features

1. Custom component

Form-create supports generating any vue components inside the form

example

For example, to generate an `el-button` component:

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

Note! The generated components must be mounted globally or through form-create

Mount via Vue

Vue.component(component.name, component);

Mount via form-create

formCreate.component(component.name, component);

2. Custom layout

Layout of components can be achieved by setting configuration items `col` or grid components

example

Set the component layout through the configuration item `col`, set a row to display two components

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

Display three components in one row through grid component settings

{
   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. Suffixes of components

Configure the prefix of the component by generating the prefix attribute of the rule, and the suffix attribute to configure the suffix of the component

example

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

Set the prefix and suffix as a custom component

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

APi introduction

The following are commonly used methods

Complete Api introduction

Set form value

Override method, undefined fields will be set to `null`

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

//Using：
```js
fApi.coverValue({goods_name:'HuaWei'})
```

//Merging method, undefined fields are not modified

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

//Using：
```js
fApi.setValue({goods_name:'HuaWei'})
```
//Alias ​​method`changeValue`, `changeField`

Hidden fields

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

//Using：
```js
fApi.hidden(true, 'goods_name')
```

Get the hidden state of the component

```typescript
type hiddenStatus = (field:string)=>Boolean
```

//Using：
```js
const status = fApi.hiddenStatus('goods_name')
```

Insert rule

Pre-insertion

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

//Using：
```js
fApi.prepend({
     type:"input",
     title:"info",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "placeholder",
     },
     validate:[
         { required: true, message: 'required', trigger: 'blur' },
     ],
}, 'goods-name')
```

Postscript addition

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

//Using：
```js
fApi.append({
     type:"input",
     title:"info",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "placeholder",
     },
     validate:[
         { required: true, message: 'required', trigger: 'blur' },
     ],
}, 'goods-name')
```

Validate form

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

//Using：
```js
fApi.validate((valid, fail) => {
    if(valid){
        //todo success
    }else{
        //todo fail
    }
})
```

Get form data

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

//Using：
```js
const formData = fApi.formData()
```

Submit form

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

//Using：
```js
fApi.submit((formData, fapi) => {
    //todo Submit Form 
},()=>{
    //todo Form validation failed
})
```