Schema Introduction

A schema is an object consists of fields:

{
    fields: []
}

Other attributes, such as title or description, can be used in form templates.

{
    // required
    component: 'text-field',
    name: 'login',
    // optional
    actions: { ... },
    clearedValue: null,
    clearOnUnmount: true,
    condition: { ... },
    dataType: 'string',
    FieldProps: { ... },
    hideField: true,
    initializeOnMount: true,
    initialValue: 'default-login',
    resolveProps: (props) => ({ label: props.label || 'default label' }),
    validate: [ ... ],
    // + component specific attributes
    ...componentSpecificAttributes
}

string

The value of component is a string that represents used component. Available options depend on the component mapper.

Data Driven Forms automatically checks if the component is available; if not, it shows an error message. You can use componentTypes to prevent typos.

This attribute is not required for the first level of the fields in the following components, as this first level of the fields is implemented with special predefined components:

wizard, field-array, tabs

Here is an example for wizard:

const schema = {
  fields: [{
    component: 'wizard', // here you define the wizard component
    name: 'wizard-field',
    ...
    // first level of this `fields` are the direct children of wizard - wizard-steps
    fields: [{
      name: 'step-1',
      title: 'Foo',
      ...
      fields: [{
        // these are not children of the wizard step and you require a component attribute again
        component: 'text-field',
        name: 'bar',
        ...
      }]
    }]
  }]
}

string

name represents the variable that stores the form value. You can use dot notation to create nested objects.

{
    ...,
    name: 'person.name'
}

The code above will be automatically transformed to:

{
    person: {
        name: 'value'
    }
}

object

The object of actions maps other properties to globally defined actions.

For example, a select has lazy loaded option. With actions, you can define parameters for the function, and keep them in a string format.

Read more.

any

If the field is cleared, clearedValue defines the value that will be used.

Read more.

bool

When clearOnUnmount is true, after the component is unmounted, the value will be cleared.

Read more.

object | array

When a condition is fulfilled, it can show or hide a component.

Here is an example:

{
    ...,
    condition: {
        when: 'first-name',
        is: 'Douglas'
    }
}

In this example, only if the first-name is Douglas, the field appears.

The following multiple condition types can be nested:

and, or, not, sequence.

The following are multiple matchers:

is, isEmpty, isNotEmpty, pattern.

You can use notMatch to invert matchers.

The following actions can be binded to conditions:

set, visible.

string

The value of dataType must be one of the following strings:

"integer", "float", "number", "boolean" or "string".

The value of this component will be converted to the type that dataType indicates.

Read more.

object

You can pass additional Final Form FieldProps via FieldProps object. This prop is made to avoid conflicts between Final Form props and component props.

bool

When the hideField is true, CSS hides this filed. The value will be still registered and submitted.

bool

When initializeOnMount is true, every time the component is mounted, the value will be re-initialized.

Read more.

any

Sets an initial value of the field.

Read more.

function (props, {meta, input}, formOptions) => props

resolveProps is only applicable for fields that connected to the form state.

The function of resolveProps can compute field properties from the current state of the field.

Read more.

array

validate array sets up validation of the field. It is an array of the following objects or functions:

Object

{
    ...,
    validate: [{type: 'required', message: 'This field is required'}]
}

Type is one of our provided validators:

REQUIRED, [MIN|MAX|EXACT]_LENGTH, URL, PATTERN or [MIN|MAX]_NUMBER_VALUE.

You can use validatorTypes to prevent typos.

You can also implement your own validator by creating a validator mapper.

Message

All provided validators allows you to change the message via message attribute; you can also set the message globally.

By default, each validator provides a default message in English.

Function

You can pass a custom function as the following example:

{
    ...,
    validate: [function]
}

This also supports using async functions.

Each component defines its required and optional props.

{
    component: 'text-field',
    name: 'password',
    label: 'Enter password', // component defined prop
    type: 'password', // component defined prop
    helperText: 'Please enter your password' // component defined prop
}

Read more.