openfext/vue-form-builder

Build powerful vue form with JSON schema and composition api.

Vue Form Builder

Build powerful vue form with JSON schema and composition api. Any custom input components and popular ui frameworks such as Element UI, View UI, Ant Design Vue are supported.

🇺🇸 English | 🇨🇳 简体中文

Features

• 📺 Powerful - use composition api to manage complex form state
• 📷 Flexible - support any custom input components
• ⌚ Adaptable - different ui frameworks can be used out of the box through the adapters
• 📻 Reliable - has been used in multiple applications in the production environment

Docs

🇨🇳 Chinese

• Introduction
• Guide
• API Reference
• Config Reference

🇺🇸 English

WIP...

Example

⚡ Live Preview | 📖 Element UI Storybook | 📖 View UI Storybook | 📖 Ant Design Storybook

Contacts

Welcome to join the group chat to discuss project issues and front-end technologies 💬

QQ

ChatID: 667576147

WeChat Group

Add the author's WeChat to get into the group:

Built With

• Vue.js
• Vue Use
• Vee Validate
• ElementUI
• View UI
• Ant Design Vue

License

MIT

Copyright (c) 2018 - present, Felix Yang

vue-form-builder's Issues

ElFormAdaptor无法使用

Bug Report

Affected Feature

真的很想知道为什么一直爆这个问题，抄的栗子还报这个错误
ElFormAdaptor
`
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src/views/Home.vue
at src/App.vue

`

Is this a regression

Description

Minimal Reproduction

Exception or Error

Your Environment

Vue Version:

Vue Composition API:

Anything else relevant?

Support input `mask` ?

@felixpy

⚡ 技术交流讨论组

欢迎加入群聊讨论项目问题和前端技术 💬

QQ

群号：667576147

微信群

加作者微信进群：

在JSON输入框中手动加入新的表单项，表单项无法正常输入

作者您好：

我clone了本项目中的/examples/simple-demo在本地运行起来之后。

往中间的JSON输入框中，手动新增了新的表单项。

//old
[
    {
        "tag": "el-input",
        "item": {
            "label": "标题"
        },
        "detail": {
            "name": "title",
            "defaultValue": "默认标题"
        }
    },
    {
        "tag": "el-input",
        "item": {
            "label": "描述"
        },
        "detail": {
            "type": "textarea",
            "name": "desc",
            "placeholder": "请填写一个精彩的描述",
            "rows": 3
        }
    },
    {
        "tag": "el-date-picker",
        "item": {
            "label": "日期"
        },
        "detail": {
            "name": "date",
            "placeholder": "请选择日期",
            "valueFormat": "yyyyMMdd"
        }
    },
    {
        "tag": "el-radio",
        "item": {
            "label": "地区"
        },
        "detail": {
            "name": "area",
            "items": [
                {
                    "text": "北京",
                    "label": "1"
                },
                {
                    "text": "上海",
                    "label": "2"
                },
                {
                    "text": "广州",
                    "label": "3"
                },
                {
                    "text": "深圳",
                    "label": "4"
                }
            ]
        }
    },
    {
        "tag": "el-checkbox",
        "item": {
            "label": "主题"
        },
        "detail": {
            "name": "subject",
            "items": [
                {
                    "text": "历史",
                    "label": "1"
                },
                {
                    "text": "战争",
                    "label": "2"
                },
                {
                    "text": "科幻",
                    "label": "3"
                },
                {
                    "text": "爱情",
                    "label": "4"
                },
                {
                    "text": "文艺",
                    "label": "5"
                },
                {
                    "text": "生活",
                    "label": "6"
                }
            ]
        }
    },
    {
        "tag": "el-select",
        "item": {
            "label": "标签"
        },
        "detail": {
            "name": "tag",
            "multiple": true,
            "items": [
                {
                    "label": "温暖",
                    "value": "1"
                },
                {
                    "label": "感动",
                    "value": "2"
                },
                {
                    "label": "刺激",
                    "value": "3"
                },
                {
                    "label": "紧张",
                    "value": "4"
                },
                {
                    "label": "有爱",
                    "value": "5"
                },
                {
                    "label": "搞笑",
                    "value": "6"
                }
            ]
        }
    }
]

//new
[
    {
        "tag": "el-input",
        "item": {
            "label": "标题"
        },
        "detail": {
            "name": "title",
            "defaultValue": "默认标题"
        }
    },
    {
        "tag": "el-input",
        "item": {
            "label": "描述"
        },
        "detail": {
            "type": "textarea",
            "name": "desc",
            "placeholder": "请填写一个精彩的描述",
            "rows": 3
        }
    },
    {
        "tag": "el-date-picker",
        "item": {
            "label": "日期"
        },
        "detail": {
            "name": "date",
            "placeholder": "请选择日期",
            "valueFormat": "yyyyMMdd"
        }
    },
    {
        "tag": "el-radio",
        "item": {
            "label": "地区"
        },
        "detail": {
            "name": "area",
            "items": [
                {
                    "text": "北京",
                    "label": "1"
                },
                {
                    "text": "上海",
                    "label": "2"
                },
                {
                    "text": "广州",
                    "label": "3"
                },
                {
                    "text": "深圳",
                    "label": "4"
                }
            ]
        }
    },
    {
        "tag": "el-checkbox",
        "item": {
            "label": "主题"
        },
        "detail": {
            "name": "subject",
            "items": [
                {
                    "text": "历史",
                    "label": "1"
                },
                {
                    "text": "战争",
                    "label": "2"
                },
                {
                    "text": "科幻",
                    "label": "3"
                },
                {
                    "text": "爱情",
                    "label": "4"
                },
                {
                    "text": "文艺",
                    "label": "5"
                },
                {
                    "text": "生活",
                    "label": "6"
                }
            ]
        }
    },
    {
        "tag": "el-select",
        "item": {
            "label": "标签"
        },
        "detail": {
            "name": "tag",
            "multiple": true,
            "items": [
                {
                    "label": "温暖",
                    "value": "1"
                },
                {
                    "label": "感动",
                    "value": "2"
                },
                {
                    "label": "刺激",
                    "value": "3"
                },
                {
                    "label": "紧张",
                    "value": "4"
                },
                {
                    "label": "有爱",
                    "value": "5"
                },
                {
                    "label": "搞笑",
                    "value": "6"
                }
            ]
        }
    },
   {
        "tag": "el-input",
        "item": {
            "label": "姓名"
        },
        "detail": {
            "name": "name"
        }
    }
]

结果发现新增的input无法正常输入，疑似双向绑定异常。

但是在您的在线预览中却不存在这个问题https://element-form-builder.now.sh/

期待得到您的恢复，谢谢...

能加上拖拽生成组件吗？

这个功能真得太棒了。如果能通过ui生成配置。那就更厉害了~

请问支持自定义验证吗？如何进行自定义验证？

看了下文档和demo，上面提供了常用的验证。但是我不知道，自定义验证该如何实现？新手求轻拍。。。

config 中 rules 和 elements 为什么不分开传入？elements 为什么是数组？

config 中 rules 和 elements 为什么不分开传入？

rules 本身会预先配置，elements会存在二次操作。比如 select、radio、checkbox中的数据可能会异步获取。

elements 为什么是数组？

个人觉得应该设计成对象，方便之后修改数据。
伪代码

  <e-form
        v-model="formValues"
        :fields="fields"
        :rules="rules"/>

	  // 绑定字段
      formValues: {
        title: '',
		area: '',
  	   },
      // 字段配置
      fields: {
        title: {
          label: '标题',
        },
        area: {
          tag: 'el-radio',
          label: '地区',
          items: []
        },
      },
      // 字段校验
      rules: {
        title: { required: true, message: 'qdddd' }
      }

	 // fetch data
	 this.delay(2000).then(() => {
        const area = [
          { text: '西安', label: 2019 },
          { text: '杭州', label: 2018 },
          { text: '上海', label: 2017 }]

        this.fields.area.items = area
        this.formValues.area = area[0].label

      })

How build `Mixed input`?

How a create https://element.eleme.io/#/en-US/component/input#mixed-input

@felixpy

Fail to serve on NuxtJS

Bug Report

Description

The guideline seems broken on Nuxt setup.

Minimal Reproduction

Fresh project from yarn create nuxt-app, using options:

• SSR
• ElementUI

Exception or Error

Must use import to load ES Module: <skip>/node_modules/vue-runtime-helpers/dist/normalize-component.mjs

Updated on 14/11/2020:

• Above exception can be resolved by adding the libraries to nuxt.config.js transpile section:

  build: {
    transpile: [
      /^element-ui/,
      /^vue-runtime-helpers/,
      /@fext\/vue-form-builder/,
      /@fext\/vue-use/,
    ],
  },

However, it seems the composition api not working correctly (this/context)

Your Environment

Vue Version:

2.6.11

Vue Composition API:

1.0.0-beta.10

NuxtJS Version

2.14.0

Node Version

v12.18.3

The HTML tag generated by the component contains unnecessary attributes

As shown in the code below, the item attribute is unnecessary:

<div class="el-select el-select--medium" name="tag" multiple="multiple" items="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]">
<!-- elements -->
</div>

English Version of Documentation

Hi, when can We expect the English version of the documentation?

Which files do I modify to turn it into the demo?

Hi,

I ran the commands on terminal but I don't know which changes to make to which files to make it look like the live demo. Help greatly appreciated.

The project is running correctly on localhost with a login form but I don't know how to go from there to having the larger form from the example and the file to be edited to enable form changes.

表单元素不支持绑定事件？

请问支持表单直接的级联操作吗？如果支持该如何使用？

请问支持表单直接的级联操作吗？如果支持该如何使用？

Support Vuetify component framework

Feature Request

Relevant Package

Form Adaptor

Description

Support Vuetify since it is a very popular Material Design component framework.

Describe the solution you'd like

Add Vuetify component adapter.

Describe alternatives you've considered

Not yet.

Problem when updating parent data

I encountered with an issue while updating parent data here:

https://github.com/codetrial/element-form-builder/blob/22916aa8d4074998c21533b9c9b79a8305512e7d/src/formbuilder.js#L41

Here is a quick fix I applied

watch: {
    formValues: {
      handler: function handler(formValues) {
        this.updating = true;
        this.$emit('update:model', formValues); // model props update
      },
      deep: true
    },
}

I can send a PR if needed.

Regards

can it support vuetify？

Feature Request

Relevant Package

Description

Describe the solution you'd like

Describe alternatives you've considered

Init with formValues

When I pass in v-model formValues with values the library empties them. I would like to be able to pass formValues with data. I have used the input event to make this mechanism, but I think the library should admit it.