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
type String One of a list of built-in widget types or a custom one that will be mapped to a React component/function in the mapper object passed to MobxSchemaForm.
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 Used by date-type fields to specify the min/max allowed dates in the React-Toolbox Datepicker. These strings are parsed with sugar and support strings like "today" or "3 weeks from today".
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 An optional mask recognized by react-input-mask component (i.e. "(999) 999-9999"). User input will be formatted according to the mask on the fly. Only applicable to text / tel / number widgets (the property type should be string and it should not have a maxLength).
maskProps (***) Object You can specify any props here that will be passed as-is to the react-input-mask component (i.e. maskChar, alwaysShowMask, etc).
validations (*) Array of Functions or String keywords corresponding to keys of options.validators object passed to MobxSchemaForm Validator functions have the call signature of validateField(). 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 String or Function or Object with tv4 numeric error codes as keys (i.e. 302 for required) and "default" key (Function, Object format and template parsing feature is not present in react-schema-form) tv4 has built-in validation error messages but they are not very user-friendly. You can optionally specify the validation error messages to be used on each field on a per-tv4-error-code basis plus a catch-all "default" message in this object. The messages themselves are parsed as a template with lodash.template in whatever format you have configured in your app with lodash templateSettings. Instead of a template string, you can also use a function, which willreceive the same context object as thelodash template, and should return an error message. Messages defined here will also be used to process tv4-format error objects in model.dataErrors and objects returned by custom validations.
className (*) String CSS class name(s) to place into the optional FieldWrapper or fieldset. Note that to place a custom class name on the React-Toolbox widget itself you need to put it in props.className instead.
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 If provided, and it eval()s to (strictly) false, the field will not be mounted. You can reference model (i.e. variable as pased to MobxSchemaForm , plus the variable form will contain the formShape object for this field.
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 an observer and can therefore react to changes in observables outside of the model (they must be globally accessible, i.e. through window object). Regular condition is always eval()ed first.

* = 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 Numeric Error Code returned by tv4 or "default"
error Error object returned by tv4.validate(), with a message property containing the error message string it generated.
value The value being validated.
model Instance of FormStore or modelShape object.
All fields from the formField object, i.e. title, minimum, maximum, etc. All fields from a formShape object (specially merged Form Field Metadata and Data Property Schema)

results matching ""

    No results matching ""