Data Property Schema

Each property is described by the following schema (in[key]):

prop Data type Description
type String One of: "string", "number", "integer", "boolean", "object" (used for dates or nested objects), and "array" (which is not yet supported in mobx-schema-form).
title String Friendly name for this property, typically shown in the field label and validation error messages. If not specified, the key will be used in its place unless options.suppressPropertyTitles=true was passed to MobxSchemaForm.
description String Additional information about the property, a hint. If not blank, description will be passed in the label prop to React-Toolbox widgets such as Input (falling back to title), DatePicker (no fallback), Checkbox (falling back to title), and Dropdown (no fallback). It will be placed in an <abbr> tag as an additional hint next to Slider and Switch widgets.
default Any The value to place into the data property if it's null or undefined. This happens whenever the form widget is mounted and also whenever validateForm() is called (i.e. in a FormStore afterRefresh callback)
enum Array Array of allowed values for the property. Usually this is not necessary as such fields are typically configured to use widgets that only allow selection of certain values as specified in titleMap in the Form Field Metadata. But if there is no titleMap, enum will be used instead and its first item will be the default value if one is not specified in default inthe schema or metadata.
pattern String String with a case-sensitive regex pattern against which string-type properties will be validated
format String A declared tv4-format with corresponding validator that will be used for string-type properties. To use this, install that package and then somewhere in your code (i.e. at app initialization) run: import tv4 from 'tv4'; import formats from 'tv4-formats'; tv4.addFormat(formats);
minLength, maxLength Number string-type properties are validated against these and they are also passed as props to React-Toolbox Input widget. Note that minLength and maxLength are copied to formField.minlength and maxlength (lowercase!)
minimum, maximum Number number-type properties are validated against these
modelKey String or Array (i.e. ['parent','child']) This is not part of the json-schema-form standard. See below.


modelKey allows you to declare alternative schemas for the same data property. For example, if you have a data property "region", you could have a key named "region_state" (or just "state") and another "region_province" (or just "province") for US states and Canadian provinces respectively and each one would set modelKey to "region". conditions in Form Field Metadata could be used to determine which field would be displayed but both end up using the same modelKey property in model data, dataErrors, etc.

Be prepared for having data entered while one of these alternatives was mounted passed to another alternative widget when conditions change. You may need to observe changes to relevant fields in your model (i.e. "country") and perform conversions or clear the value (of "region"). Otherwise, a Dropdown, for example, will show no selection when a value doesn't match one of the options but the property value will still be what was selected in the previous widget.

You can register such an observe in the afterRefresh FormStore callback:

let observeDisposer;

function afterRefresh(store) {
  observeDisposer && observeDisposer();

  // note that if is replaced completely this won't react until a refresh()
  observeDisposer = observe(, (change) => {
    if (store.isLoading) {
      // ignore changes during refresh from server

    if ( === 'country' && change.oldValue) {
      action(() => { = null;

When using a FormStore instance for the model, if a field is in error, when it unmounts, its value is reverted to the saveData in the store and the error is cleared. This means when switching between alternative versions for the same modelKey, the value will not be preserved if it's invalid when you switch.

results matching ""

    No results matching ""