# descriptors

descriptors is extended from async-validator (opens new window). Just need to write descriptors follow the rules,vue-dynamic-form-component will generate the form component automatically(use element-ui (opens new window)).

descriptors 's format: { <key>: <descriptor> }, the descriptor can be object or array.

# descriptor

Warm Prompt

descriptor can be object or array, but the fields, defaultFields, label, hidden, disabled, options, component props should be brother props with type. In addition, there is only one object include type prop in array.

# type

string, declare the type of data's field, include common data type.

注意

Note that descriptor.component.name has higher priority, the follow rules are invalid if descriptor.component.name is not null.

Value Description Component
string Must be a string el-input
number Must be a number el-input
boolean Must be a boolean el-switch
regexp Must be an instance of RegExp or a string that does not generate an exception when creating a new RegExp. el-input
integer Must be of type number and an integer. el-input
float Must be of type number and a floating point number. el-input
enum Value must exist in the enum. Can be used with enum, options el-select
date Value must be valid as determined by Date el-date-picker
url Must be of type url el-input
hex Must be of type hex el-input
email Must be of type email el-input
object Must be of type object and not Array.isArray. Use with fields or defaultField dynamic-form-item
array Must be an array as determined by Array.isArray. Use with defaultField dynamic-form-item

# label

string, field's label in form, should be declared with type in the same object.

# hidden

boolean , whether hidden the input component of value, should be declared with type in the same object. Note that the hidden value still will be validated while validating.

# disabled

boolean, whether input component disabled, default false.

# required

boolean, is field required, without or false means the field is not required.

# pattern

Regexp, the field's value must match to pass validation.

# min | max

number, can be used for string, array, number

For string and array, field's length should in [min, max]. For number, field's value should in [min, max].

# len

number, can be used for string, array, number

For string and array, field's length should equal to len. For number, field's value should equal to len.

If the len property is combined with the min and max range properties, len takes precedence.

# enum, options

array, only can be used while type === 'enum', here is the format:

{
  type: 'enum',
  enum: [0, 1, 2],
  options: [
    { label: 'female', value: 0 },
    { label: 'male', value: 1 },
    { label: 'secret', value: 2, disabled: true }
  ]
}

options is optional, label === value without options

# whitespace

boolean, only can be used while type === 'string'. Validate error if value only contain whitespace.

# message

string, cover the default error message, one validate rule can have one message.

const descriptors = {
  name: [
    { type: 'string', required: true, message: 'username is required' },
    { min: 3, max 20, message: 'username length must between 3 to 20' },
    { whitespace: true, message: 'username can not be whitespace' }
  ]
}

# fields

object, only can be used while type === 'object'. You can use it if the child fields have different value format. Actually, it is the descriptors of field's value, your use it to get nested object.

const descriptors = {
  company: {
    type: 'object',
    fields: {
      name: { type: 'string', required: true },
      address: {
        type: 'object',
        fields: {
          country: { type: 'string', required: true },
          province: { type: 'string', required: true }
        }
      }
    }
  }
}

The above descriptors get the data with this structure:

{
  company: {
    name: String,
    address: {
      country: String,
      province: String
    }
  }
}

# defaultField

object | array, priority to fields, only can be used while type === 'object' | 'array'. You can use it if the child fields have same value format. Actually, it is the descriptor of field, you can use it to get complex data structures like Hashmap or multidimensional arrays.

const descriptors = {
  dict: {
    type: 'object',
    defaultField: { type: 'string', required: true }
  },
  array2d: {
    type: 'array',
    defaultField: {
      type: 'array',
      defaultField: { type: 'string', required: true }
    }
  }
}

The above descriptors get the data with this structure:

{
  dict: {
    <key>: String
  },
  array2d: [
    [String]
  ]
}

# validator

Function, custom the validate function with format: validator(rule: Object, value, callback: Function)

  • rule

    the validate rule of the field

  • value

    the value of the field

  • callback

    callback function of validation. callback(new Error(<message>)) means validate error, message is the error message. callback() means validate success.

const descriptors = {
  name: [
    { type: 'string', required: true },
    {
      validator: function (rule, value, callback) {
      	if (value.length < 5) {
    			return callback(new Error('name should logger than 5'))
    		}
        if (value.indexOf('/%$') !== -1) {
          return callback(new Error('name can not include /%$'))
        }
				return callback()
    	}
    }
  ]
}

# component

Provided for user to custom the component easily, it can custom the component's content, props and events.

// component demo
{
  name: 'el-button',
  props: {
    type: 'primary',
    size: 'small'
  },
  events: {
    click () {
      console.log('button click')
    }
  }
}

# name

string type, custom to use which element or component.

# props

object type, it will be the value of input component's v-bind prop(input component refer to descriptor.type). You can custom the component props with this option, there are some common props like: placeholder, disabled, ... , etc. Other props of component refer to element-ui (opens new window). Note that it will be the value of the custom component's v-bind prop, if component.name is not null.

# events

object type, it will be the value of input component's v-on prop(input component refer to descriptor.type). You can custom the component props with this option, there are some common prop like: placeholder, disabled, ... , etc. Other props of component refer to element-ui (opens new window). Note that it will be the value of the custom component's v-on prop, if component.name is not null.

# children

children is used to custom the content of component. It has two types:

  • string : the content is plain text. It will be inserted with span element
  • array[component | string] : the content has more than one element, the array item has two types:
    • component : same structure with component
    • string : the item is plain text. It will be inserted with span element
Last Updated: 9/17/2020, 5:11:39 PM