# dynamic-form

# Props

prop description type option values default required
value form data object yes
lang language string en_US,zh_CN zh_CN
languages custom language pack object
descriptors descriptors of form data, refer to descriptor object yes
size size of form component string medium,small,mini small
disabled whether form is disabled boolean false
backgroundColor root form background color string Hex color or 'none' none
fontSize font size of form number 14
bgColorOffset form background color offset number 8
showOuterError whether show parent component's error boolean true

languages format:

// <lang> refer to lang prop
  <lang>: {
    addKeyPlaceholder: 'Input the key you want to add',
    addKeyButtonText: 'Add Key',
    addArrayItemButtonText: 'Add Item'

# Slots

slot name description
operations operation slot for form, use to put submit/reset button generally

# Methods

method description params
validate validate the form. Takes a optional callback function as a param. Callback function will be executed with one param(validate result) while having the callback param. Return a promise(resolve validate result) without callback param. Function(callback: (valid) => {}):void | Function():Promise(Boolean)
resetFields reset form and remove validation result () => {}
clearValidate clear validation message of form () => {}

# Example

Click To Show/Hide Demo
    <template slot="operations">
      <el-button @click="clearValidate">clearValidate</el-button>
      <el-button @click="resetFields">resetFields</el-button>
      <el-button type="primary" @click="validate" plain>validate</el-button>

export default {
  props: ['lang'],
  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 () {
    resetFields () {
    validate () {
Last Updated: 9/17/2020, 5:11:39 PM