function (props, {meta, input}, formOptions) => props
Only applicable for fields connected to the form state.
A function allowing to 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' })}]}
All field props passed in the schema.
What are input and meta?
Input
Input is an object which contains field values and methods that change form state. See the selection of most important attributes:
{value: any, // any value of given form field. Its data type is based on field data typename: string, // unique name of form field. Value will be accessible under this key in form stateonBlur: (event) => void, // function that should be triggered on field blur eventonChange: (value) => void, // function that changes value of field in formState. Should be called whenever you want to change value of fieldonFocus: (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.
Meta
Meta is a object which contains meta information about field with given name. There is a lot of information about every field. Full list is here. These are commonly used meta informations
{error: any, // whatever your validation function returnspristine: bool, // true if the current value is === to the initial value, false if the values are !==.dirty: bool, // opposite of pristinetouched: 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.}
Object containing access to the form state. Read more here.
I. resolveProps
cannot return actions
. You can access actions
's code in the resolveProps
prop if you need it.
II. Do not use async
functions to get the props.
III. Do not trigger any side effects, as it could introduce bugs.
IV. resolveProps
are merged together with following priority: actions.resolveProps
(highest) > field.resolveProps
> mapper.resolveProps
(lowest)
You can modify 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 other fields in the form via functions from formOptions
. Don't forget to set the right subscription to trigger resolveProps
functions from changing other fields.
Following example shows how can be a behavior of components changed using resolveProps
. In this example, the component will have different color and helper text after it is validated.