The form is configured according to json schema, json schema attribute reference http://json-schema.org/draft-07/json-schema-validation.html.
You can use form generation and form preview function replaces the work of a part of the handwritten json schema.
Since the properties of the json schema do not fully satisfy the generation of the form, some custom properties have been added. The custom property name convention begins with
$
.
-
id: string
: The id of the current attribute. The general convention begins with$root
and is separated by/
. For example,$root/key1/key2
, the id and json key names must correspond. When type isobject
, you need to add/properties
, for example:{ "id": "$root", "type": "object", "properties": { "key": { "id": "$root/properties/key", "type": "string" } } }
When type is
array
, items need to add/items
, for example:{ "id": "$root", "type": "array", "items": { "id": "$root/items", "type": "string" } }
-
type: string
: data type, including string, number, integer, boolean, array, object. The schema form renders different components based on that type. -
title: string
: Title, used to describe the role of the keyword. The title of the form. -
description: string
: Description, used to describe the role of the keyword. A description of the form. -
$componentType: string
: Rendered as other components (When there is no oneOf attribute). -
$order: number
: Define the order in which components are arranged. The smaller the value, the higher the arrangement. When this property is not configured, the default is 0. -
oneOf: Array<object>
: Multiple types of keywords possible. -
$oneOfComponentType: string
: Rendered as other component when there has an oneOf attribute, at this point, the$componentType
attribute only takes effect for the schema configuration inoneOf
. The component returned by the function reference。 -
$oneOfIndex: number
: The index of the selected Radio.Group under oneOf. -
$oneOfDisabled: boolean
: OneOf is disabled under Radio.Group. -
$hidden: boolean
: Hide form fields (form values still exist). -
$disabled: boolean
: Disable components. -
$formItemProps: object
: ConfigureForm.Item
props. -
$tableColumnHidden: boolean
: When the object is an object in the array and the component is a table, the column is hidden (the form value still exists). -
$tableRender: string
: Rendering to other custom table column rendering components.
The component renders the collapsed panel by default (Collapse). Configuration properties:
properties: object
: When type is object, the attributes below the object are listed.required: Array<string>
: The attributes that the object must contain. Unlike the$required
attribute.
The component renders the input box by default (Input). Configuration properties:
-
$required: boolean
: The current object value must exist. Corresponding validation of the corresponding form. -
$requiredMessage: string
: Customize the required verification failure message. -
pattern: string
: regular expression validation. -
$patternOption: string
: Used to specify global matches, case-sensitive matches, and multi-line matches. -
$patternMessage: string
: Custom pattern validation failure message. -
minLength: number
: The minimum length of the string is verified. -
$minLengthMessage: string
: Customize the verification failure message for minLength. -
maxLength: number
: The maximum length of the string is verified. -
$maxLengthMessage: string
: Customize the maxLength verification failure message. -
$length: number
: The specified length of the string is verified. -
$lengthMessage: string
: Customize the $length validation failure message. -
enum: Array<string>
: Verify that the value of the form control must be in the array value of this keyword. -
$enumMessage: string
: Customize the enum's validation failure message. -
$readOnly: boolean
: The form control is read-only. -
$placeholder: string
: The placeholder property of the form control. -
$defaultValue: string
: The default value of the form control. -
$showTime
: When the component type isdate
, add the time selection function. On by default. -
$format
: When the component type isdate
, set the date format. When the time selection function is turned on, the default value isYYYY-MM-DD HH:mm:ss
; when the time selection function is turned off, the default value isYYYY-MM-DD
.Value Component Name textArea Text field. select Drop-down box. radio Radio box. date Date picker. (When the component is a date picker, the value is a Moment object, and you need to process the value of the date yourself.) password Password box. -
$options: Array<{ label: string, value: string }>
: Optional when $componentType is select, radio.
The component renders the numeric input box by default (InputNumber). Configuration properties:
-
$required: boolean
: The current object value must exist. Corresponding validation of the corresponding form. -
$requiredMessage: string
: Customize the required verification failure message. -
minimum: number
: The minimum value of the form. -
$minimumMessage: string
: Customize the verification failure message for the minimum. -
maximum: number
: The maximum value of the form. -
$maximumMessage: string
: Customize the verification failure message for maximum. -
$integer: boolean
: Must be an integer. When type is integer, this item is verified by default. -
$integerMessage: string
: Customize the authentication failure message for $integer. -
enum: Array<number>
: Verify that the value of the form control must be in the array value of this keyword. -
$enumMessage: string
: Customize the enum's validation failure message. -
$readOnly: boolean
: The form control is read-only. -
$placeholder: string
: The placeholder property of the form control. -
$defaultValue: number
: The default value of the form control.Value Component Name radio Radio box. -
$options: Array<{ label: string, value: number }>
: Optional option when $componentType is radio.
The component renders a checkbox by default (Checkbox). Configuration properties:
-
$defaultValue: boolean
: The default value of the form control.Value Component Name switch Switch.
The component renders the table by default (Table).Click on the number of rows in the table to modify the location of the data. Configuration properties:
-
items: object
: the contents of the array. -
$defaultValue: Array<any>
: The default value of the form control. -
$required: boolean
: The current object value must exist. Corresponding validation of the corresponding form. -
$requiredMessage: string
: Customize the required verification failure message. -
minItems: number
: the minimum value of the form. -
$minItemsMessage: string
: Customize the verification failure message for the minItems. -
maxItems: number
: the maximum value of the form. -
$maxItemsMessage: string
: Customize the verification failure message for maxItems. -
$addDataInReverseOrder: boolean
: When set totrue
, data is inserted into the header when the table component adds data. -
$rowKey: string
: Set the rowKey field of the table.Value Component Name checkbox Multiple checkbox. For compatibility with older versions, the "checkbox" can also be rendered as a multi-select box. multiple Drop-down box multiple selection mode. tags Multi-select mode for drop-down box, and you can enter text. -
$options: Array<{ label: string, value: string | number }>
: Optional when $componentType is checkbox, multiple, tags.