vue-dynamic-form-component

Vue dynamic nested form component. Support nested Object/Hashmap/Array. Can custom component yourself.

Getting Started →

Generate form by descriptors Or custom component

Write only data's descriptor(extend from async-validate), then automatically generate form(use element-ui)

Support almost all data type with validation

Support almost all data type and normal data validation(email, url, ... etc)

Support nested object/array

Support nested object/array. Generate multi-level form, darken child form's background automatically

# Example

Click To Show/Hide Demo

<template>
  <dynamic-form
    ref="dynamic-form"
    v-model="data"
    :descriptors="descriptors"
    :showOuterError="false">
    <template slot="operations">
      <el-button @click="reset">Reset</el-button>
      <el-button type="primary" @click="validate" plain>Validate</el-button>
    </template>
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        prop1: { type: 'number', required: true },
        prop2: {
          type: 'object',
          label: 'object label',
          fields: {
            prop1: { type: 'email', required: true },
            prop2: { type: 'number', required: true },
            prop3: [
              { type: 'string', required: true, message: 'object label.prop3 is required' },
              { pattern: /test/, message: 'object label.prop3 should include test' }
            ],
            prop4: {
              type: 'enum',
              enum: [0, 1],
              options: [
                { label: 'option 1', value: 0, disabled: true },
                { label: 'option 2', value: 1 }
              ]
            },
            prop5: { type: 'boolean', required: true },
          }
        }
      },
      data: {}
    }
  },
  methods: {
    reset () {
      this.$refs['dynamic-form'].resetFields()
    },
    validate () {
      this.$refs['dynamic-form'].validate()
    }
  }
}
</script>