Redux-form 6.0.0 access error outside Field component

Question

In Redux-form v5 I was able to access to the "inline" errors (async validation) from anywhere in the decorated form, like so:

const fields = [
  'email'
]

// inside the decorated form
const { email } = this.props.fields

console.log(email.error) // 'the validation error of the 'email' field

How can I achieve the same thing using Redux-form 6.0.0+ ?

Answer 1

If you are wanting to display the error next to the input, then it should be handled in the component that you pass to Field. If you want to display all the errors together, like at the bottom of the form by the submit button, you could use the new Fields component like so:

const fieldNames = [
  'email',
  'password'
]

const renderAllErrors = fields => (
  <ul>
    {Object.keys(fields).map(key => {
      const { meta: { touched, error } } = fields[ key ]
      return touched && error ? <li key={key}>{key}: {error}</li> : undefined
    })}
  </ul>
)

...

<Fields names={fieldNames} component={renderAllErrors}/>

Answer 2

The solution I found is to use the error prop (http://redux-form.com/6.0.0-rc.4/docs/api/Props.md/#-error-any-). From my asyncValidate function I fill the returned error._error object with my fields errors. I can then access it from the decorated form using const { error } = this.props.

If anyone has a better solution...

Edit: don't do this. Use the valid answer (Fields component).