Form Field Metadata
Each form field in the form array passed to MobxSchemaForm can optionally specify additional metadata that controls the type of widget to use and how it's rendered and whether it's rendered at all:
prop
Data type
Description
key
String
Required except for fieldset and help. Name of the key in schema.properties.
type
String
placeholder
String
Passed to React-Toolbox Datepicker widget (no fallback) and to Input widget (fallback to schema title) in hint
default
Any
Overrides schema default
titleMap
Array of objects with name (not label!) and value keys (select can also have group key (not yet supported by built-in React-Toolbox Dropdown) or Array of values
Required for select, radios and link type fields. Specifies the list of options for React-Toolbox Dropdown, values and optional labels for Radios, optional labels for Switch, the text variants for link. If neither schema, nor field metadata specifies default, the value of the first item in titleMap is used as the default.
min, max (*)
String
min, max, step, tickLabelsStep, tickLabelsFormat (*)
Number
Used by range-type fields. If min or max are not specified here, falls back to minimum and maximum from schema. If step is specified, the default range widget will render tick labels (as unstyled(!) OL/LI tags) under the React-Toolbox Slider control. Set tickLabelsStep to 0 to disable or set it to 2 to render a label every other step tick (currently requires max-min to be even). tickLabelsFormat is an optional function that takes the step number value and returns a formatted result.
props (*)
Object
You can specify any props here that will be passed as-is to the React-Toolbox widget. For example, for select (Dropdown), you can set allowBlank to false and have a { name: "Select state", value: null } as the first item in the titleMap and it'll be selected if the value doesn't match any of the options. You can specify okLabel and cancelLabel strings for date (Datepicker) or set pinned or snaps to false for range (Slider) fields.
mask (***)
String
maskProps (***)
Object
validations (*)
In addition to built-in tv4 schema-based validation, you can specify an ordered list of custom validations that will be called if tv4 does not return a validation error. Validation stops after the first validation error. Each validator function should return either a validation error message string or a tv4-form error object (i.e. with code and optional message) that will be processed using validationMessage.
validationMessage
className (*)
String
items
Array
Currently only supported on a fieldset. Contains an ordered list of Objects in Form Metadata Format and allows you to place certain fields inside a fieldset.
condition
String
falseConditionValue (**)
Any
If not undefined, when condition eval() changes to (strictly) false, the corresponding model data property will be set to this value. Typically this would be null. The corresponding model dataErrors property will also be nulled (regardless of falseConditionValue).
mobxCondition (*)
String
Works exactly the same way as condition but is eval()ed inside asSchemaField. It's mostly historical now - there shouldn't be any difference between condition and mobxCondition any more. Regular condition is always eval()ed first.
requiredCondition (1.10+)
String
If provided, and when it eval()s to true, the field will be considered required. The field should not be included in the required array when using this. Eval()ed in the same context as condition.
readOnly (1.11+)
Boolean
If true, the field will always be readOnly/disabled.
readOnlyCondition (1.14.1+)
String
If provided, and when it eval()s to true, the field will be considered readOnly/disabled. Overrides the readOnly property if present. Eval()ed in the same context as condition.
* = feature not present in react-schema-form. ** = new feature in v1.5. *** = new feature in v1.9.
validationMessage template context
property / template variable
Description
code
error
Error object returned by tv4.validate(), with a message property containing the error message string it generated.
value
The value being validated.
model
All fields from the formField object, i.e. title, minimum, maximum, etc.
Last updated
Was this helpful?