chenquincy / Vue Dynamic Form Component
Licence: mit
Vue dynamic nested form component, support nested Object/Hashmap/Array. Vue动态多级表单组件,支持嵌套对象/Hashmap/数组。
Stars: ✭ 220
Projects that are alternatives of or similar to Vue Dynamic Form Component
Ng Dynamic Component
Dynamic components with full life-cycle support for inputs and outputs for Angular
Stars: ✭ 396 (+80%)
Mutual labels: dynamic, component
Selectivity
Modular and light-weight selection library
Stars: ✭ 1,113 (+405.91%)
Mutual labels: component, form
Validator.js
⁉️轻量级的 JavaScript 表单验证,字符串验证。没有依赖,支持 UMD ,~3kb。
Stars: ✭ 486 (+120.91%)
Mutual labels: validate, form
dynamic-form-json
dynamic-form-json is a tiny library to generate a Form in React automatically based on certain array of object that passed as a props
Stars: ✭ 16 (-92.73%)
Mutual labels: dynamic, form
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (-49.09%)
Mutual labels: validate, form
Validate
A simple jQuery plugin to validate forms.
Stars: ✭ 298 (+35.45%)
Mutual labels: validate, form
Ngx Dynamic Form Builder
FormBuilder + class-transformer + class-validator = dynamic form group builder for Angular10+
Stars: ✭ 93 (-57.73%)
Mutual labels: dynamic, form
Talquei
🤖 Vue components to build webforms looking like a conversation
Stars: ✭ 90 (-59.09%)
Mutual labels: component, form
Rails-4-ElasticSearch-dynamic-facets
Rails 4 ElasticSearch integration with dynamic facets
Stars: ✭ 16 (-92.73%)
Mutual labels: dynamic, form
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-39.55%)
Mutual labels: dynamic, component
dynamic-input-fields-reactjs
Example of the dynamic input fields in ReactJS
Stars: ✭ 31 (-85.91%)
Mutual labels: dynamic, form
Native
Generate a form using JSON Schema and Vue.js
Stars: ✭ 382 (+73.64%)
Mutual labels: component, form
SuluFormBundle
Form Bundle for handling Dynamic and Symfony Forms in https://sulu.io
Stars: ✭ 51 (-76.82%)
Mutual labels: dynamic, form
Nouislider
noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
Stars: ✭ 5,127 (+2230.45%)
Mutual labels: component, form
Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (+15%)
Mutual labels: component, form
tform
A easy, extensible and dynamic flutter form framework. Support for custom selectors, validators and widgets. Support form verification, insert, delete and so on.
Stars: ✭ 30 (-86.36%)
Mutual labels: dynamic, form
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (-42.27%)
Mutual labels: validate, form
Introduction
vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(reference to async-validator) of the data you want, vue-dynamic-form-component will generate the form automatically.
Docs
Usage Example
<template>
<dynamic-form
ref="dynamic-form"
v-model="data"
:descriptors="descriptors">
<template slot="operations">
<el-button @click="reset">reset</el-button>
<el-button type="primary" @click="validate">validate</el-button>
</template>
</dynamic-form>
</template>
<script>
// import and register element-ui first
import DynamicForm from 'vue-dynamic-form-component'
export default {
components: {
DynamicForm
},
data () {
return {
descriptors: {
name: { type: 'string', min: 3, mex: 15, required: true },
homepage: { type: 'url', message: 'The homepage must be an url' },
company: {
type: 'object',
fields: {
name: { type: 'string', required: true },
address: {
type: 'object',
fields: {
province: { type: 'string', required: true },
city: { type: 'string' }
}
}
}
},
children: {
type: 'array',
defaultField: {
type: 'object',
fields:{
name: { type: 'string', min: 3, max: 15, required: true },
age: { type: 'number', min: 1, max: 100, required: true }
}
}
}
},
data: {}
}
},
methods: {
reset () {
this.$refs['dynamic-form'].resetFields()
},
validate () {
this.$refs['dynamic-form'].validate()
}
}
}
</script>
Features
- Generate form from descriptors
- Support almost all data type
- Support multi-level form for
Object
/Array
/Hashmap
- Support data validation
- Multi-Languages support
- Support custom component
Todo
vue-dynamic-form-component can do more. There are a few things that it currently doesn't support but are planned:
- [x] Custom component props
- [x] Custom component event
- [x] Custom component
- [ ] Custom theme
- [ ] Value change event
Question
Please submit your question in Github Issue .
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].