Getting Started

Warm Prompt

vue-dynamic-form-component should use with Vue, please install Vue first.

Installation

# yarn
yarn add vue-dynamic-form-component
# or npm
npm install vue-dynamic-form-component

Registration

Global Registered

import Vue from 'Vue'
import DynamicForm from 'vue-dynamic-form-component'

Vue.use(DynamicForm)

Registered in Component

<script>
import DynamicForm from 'vue-dynamic-form-component'
export default {
  components: {
    DynamicForm
  }
}
</script>

Usage

Simple Data Type

The component support common data type:string, number, boolean, integer, float, enum, date, url, hex, email and so on, more type reference to descriptor.type

Click To Show/Hide Demo
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        date: { type: 'date', label: 'date \'s label', required: false },
        number: { type: 'number', label: 'number \'s label', required: true, placeholder: 'please input the number' },
        string: { type: 'string', label: 'string \'s label', required: true, pattern: /^test$/g },
        url: { type: 'url', label: 'url \'s label', required: true, placeholder: 'please input the url' },
        email: { type: 'email', label: 'email \'s label', required: false },
        enum: {
          type: 'enum',
          label: 'enum\'s label',
          enum: ['value-1', 'value-2'],
          options: [
            { label: 'option-1', value: 'value-1', disabled: true },
            { label: 'option-2', value: 'value-2' }
          ]
        }
      },
      data: {}
    }
  }
}
</script>

Object

To generate Object, use type: 'object' with fields

Click To Show/Hide Demo
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        object: {
          type: 'object',
          label: 'Normal Object',
          fields: {
            object: {
              type: 'object',
              label: 'Child Object',
              fields: {
                boolean: { type: 'boolean', required: true },
                number: { type: 'number', required: true },
                string: { type: 'string', required: true, pattern: /^test$/g }
              }
            },
            boolean: { type: 'boolean', required: true },
            number: { type: 'number', required: true },
            string: { type: 'string', required: true, pattern: /^test$/g }
          }
        }
      },
      data: {}
    }
  }
}
</script>

Hashmap

To generate Hashmap, use type: 'object' with defaultField

Click To Show/Hide Demo
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        hashmap: {
          type: 'object',
          label: 'hashmap Object',
          defaultField: {
            type: 'object',
            fields: {
              boolean: { type: 'boolean', required: true },
              number: { type: 'number', required: true },
              string: { type: 'string', required: true, pattern: /^test$/g }
            }
          }
        }
      },
      data: {}
    }
  }
}
</script>

Array

To generate Array, use type: 'array' with defaultField. If the array items are enumable, you can use type: 'enum' in defaultField with multiple: true that will generate a multi-select component.

Click To Show/Hide Demo
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        array: {
          type: 'array',
          label: 'array label',
          defaultField: {
            type: 'object',
            fields: {
              boolean: { type: 'boolean', required: true },
              string: { type: 'string', required: true, pattern: /^test$/g },
              array: {
                type: 'array',
                defaultField: {
                  type: 'object',
                  fields: {
                    boolean: { type: 'boolean', required: true },
                    string: { type: 'string', required: true, pattern: /^test$/g }
                  }
                }
              }
            }
          }
        },
        multiSelect: {
          type: 'array',
          label: 'multi-select',
          required: true,
          defaultField: {
            type: 'enum',
            multiple: true,
            enum: [0, 1, 2, 3],
            options: [
              { label: 'option-0', value: 0, disabled: true },
              { label: 'option-1', value: 1 },
              { label: 'option-2', value: 2 },
              { label: 'option-3', value: 3 }
            ]
          }
        }
      },
      data: {}
    }
  }
}
</script>

Custom Validation

Generally, you don't need to write extra code for field's validation. vue-dynamic-form-component provides default validate rule and message base on type

If you need to custom the validate rule or message, you can use the following methods

Custom Validate Message

You can cover the default validate message by adding the message prop. You can add multi rule for one field by using Array.

Warning

Special prop label, fields, defaultField , ...etc should be used with type in one rule. Reference to descriptor.type

Click To Show/Hide Demo
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        string: { type: 'string', label: 'username', required: true, message: 'Input the username please' },
        url: [
          { type: 'url', label: 'homepage', message: 'Homepage must be a url' },
          { required: true, message: 'Homepage is required' }
        ],
        test: { type: 'string', whitespace: true }
      },
      data: {}
    }
  }
}
</script>

Custom Validator

vue-dynamic-form-component provides many configurations to meet most of validate rules. Here are some common configurations, more configurations reference to descriptor.

Prop Type Description
required Boolean whether the prop value is required
pattern RegExp regexp to match prop value
len Number validate length of string or array
validator Function(rule, value, callback) Custom validate function, callback(Error) mean validate error, callback() mean validate success
Click To Show/Hide Demo
<template>
  <dynamic-form
    v-model="data"
    :descriptors="descriptors">
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        author: [
          { type: 'string', label: 'Author Name', required: true },
          {
            validator: (rule, value, callback) => {
              if (value.length <= 5) {
                callback(new Error('The author name\'s length must more than 5'))
              } else {
                callback()
              }
            }
          }
        ]
      },
      data: {}
    }
  }
}
</script>

Form Operations

vue-dynamic-form-component provides some common methods to operate form, you can use them with operations slot.

Warm Prompt

The document import the el-button component for convenience, you should import by yourself, if you need it in actual use. You can refer the specific parameters of form methods to Component Methods.

Click To Show/Hide Demo





 
 
 
 
 






































<template>
  <dynamic-form
    ref="dynamic-form"
    v-model="data"
    :descriptors="descriptors">
    <template slot="operations">
      <el-button @click="clearValidate">clearValidate</el-button>
      <el-button type="primary" @click="resetFields" plain>resetFields</el-button>
      <el-button type="primary" @click="validate">validate</el-button>
    </template>
  </dynamic-form>
</template>

<script>
export default {
  data () {
    return {
      descriptors: {
        prop1: {
          type: 'object',
          required: true,
          fields: {
            prop1: { type: 'string', required: true }
          }
        },
        prop2: {
          type: 'object',
          required: true,
          defaultField: { type: 'string', required: true }
        }
      },
      data: {}
    }
  },
  methods: {
    clearValidate () {
      this.$refs['dynamic-form'].clearValidate()
    },
    resetFields () {
      this.$refs['dynamic-form'].resetFields()
    },
    async validate () {
      const valid = await this.$refs['dynamic-form'].validate()
      window.alert(`valid result ====> ${valid}`)
    }
  }
}
</script>
Last Updated: 7/5/2019, 11:59:33 AM