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.


const schema = {
    fields: [{
        component: 'text-field',
        resolveProps: (props, {meta, input}, formOptions) => ({ helperText: input.value ? 'You set a value' : 'No value' })
    }]
}

props are all field properties passed in the schema.



What are meta and input?


meta

meta is an object which contains meta information about field with given name. There is a lot of information about every field.

Here is the full list of commonly used meta information.

{
  error: any, // whatever your validation function returns
  pristine: bool, // true if the current value is === to the initial value, false if the values are !==.
  dirty: bool, // opposite of pristine
  touched: bool, //true if this field has ever gained and lost focus. false otherwise. Useful for knowing when to display error messages.
  valid: bool //true if this field has no validation or submission errors. false otherwise.
}

input

input is an object, which contains field values and methods that change form state.

See the selection of the most important attributes:

{
  value: any, // any value of given form field. Its data type is based on field data type
  name: string, // unique name of form field. Value will be accessible under this key in form state
  onBlur: (event) => void, // function that should be triggered on field blur event
  onChange: (value) => void, // function that changes value of field in formState. Should be called whenever you want to change value of field
  onFocus: (event) => void, // function that should be triggered on field focus event
}

Every user interaction that updates field value in form state should also call input.onChange with correct value.


formOptions is an object containing access to the form state.

Read more.


Here are some rules about using resolveProps:

I. resolveProps cannot return actions. You can access actions's code in the resolveProps props if you need it.

II. Do not use async functions to get the props.

III. Do not trigger any side effects, as it may introduce bugs.

IV. resolveProps are merged together with the following priority:

actions.resolveProps (highest) > field.resolveProps > mapper.resolveProps (lowest)


You can modify the behavior for all components of the same type in your componentMapper via global component props.

const componentMapper = {
    'text-field': {
        component: TextField,
        resolveProps: () => { ... }
    }
}

You can get states of all the other fields in the form via functions from formOptions.

Don't forget to set the right subscription to trigger resolveProps functions from the other changing fields.


The following example shows how resolveProps changes a behavior of components .

In this example, after the component is validated, it will have different colors and helper texts.