You cannot get a list of errors from outside the rendering function given to the Field component. This is because errors are not stored in the redundancy store.
EDIT 12/12/2018:
This answer takes some time. ReduxForm now stores errors in the Redux store. Take a look at @nicoqh's answer, which uses ReduxForm selectors to get errors in any connected Redux component.
This answer is not completely obsolete, but it is no longer the cleanest way to achieve this imho.
Solution 1. Use multiple fields for the same value.
The first solution is to use multiple instances of Field for the same value. If several Field components have the same name and are associated with the same form name, they will all be associated with the same value and the same error handling.
Thus, you can use the Field component and display only the error.
import React from 'react' import {reduxForm} from 'redux-form' const renderError = ({input, meta, ...props}) => ( <span {...props} className='error'>Error : {meta.error}</span> ) const renderInput = ({input, meta, ...props}) => ( <input {...input} {...props} className={meta.error ? 'error' : null} /> ) const FormWithError = ({handleSubmit}) => ( <div> <div className='errorContainer'> <Field name='myInput' component={renderError} /> </div> <form onSubmit={handleSubmit}> <Field name='myInput' component={renderInput} /> </form> </div> ) const validate = (values, props) => { const errors = {} /* calculate errors here by appending theim to errors object */ return errors } export default reduxForm({form: 'myForm', validate})(FormWithError)
Solution 2: Use the Global Error Prop
The second solution is to use the global error details, but you will have to display errors from the container component using reduxForm .
Please note that this is complete antipater! The global error reference is for field-independent errors.
import React from 'react' import {reduxForm} from 'redux-form' const renderInput = ({input, meta, ...props}) => ( <input {...input} {...props} className={meta.error ? 'error' : null} /> ) const FormWithError = ({handleSubmit, error}) => ( <div> <div className='errorContainer'> <span {...props} className='error'>Error : {error}</span> </div> <form onSubmit={handleSubmit}> <Field name='myInput' component={renderInput} /> </form> </div> ) const validate = (values, props) => { const errors = {} /* calculate errors here by appending theim to errors object */ if(Object.keys(errors) > 0) { //You can concatenate each error in a string for(key in errors) errors._error += key + ': ' + errors[key] //or juste put the errors object in the global error property errors._error = {...errors} } return errors } export default reduxForm({form: 'myForm', validate})(FormWithError)
Solution 3: Get errors from the store
You can always get errors from the store by applying the check function to the value presented in the store. It can be ineffective for a thorough check, because it passes the check with each rendering, so it runs twice when the value changes and once when changing any other attribute. It can also be difficult to do with asynchronous validation.
import React from 'react' import {reduxForm, formValueSelector} from 'redux-form' import {connect} from 'redux' const renderErrors = errors => { const errorNodes = [] for(key in errors) errorNodes.push(<span className='error'>{key}: {errors[key]}</span>) return errorNodes } const renderInput = ({input, meta, ...props}) => ( <input {...input} {...props} className={meta.error ? 'error' : null} /> ) let FormWithError = ({handleSubmit, values, ...otherProps}) => ( <div> <div className='errorContainer'> {renderErrors(validate(values, otherProps))} </div> <form onSubmit={handleSubmit}> <Field name='myInput1' component={renderInput} /> <Field name='myInput2' component={renderInput} /> </form> </div> ) const validate = (values, props) => { const errors = {} /* calculate errors here by appending theim to errors object */ return errors } FormWithError = reduxForm({form: 'myForm', validate})(FormWithError) FormWithError = connect( state => formValueSelector('myForm')(state, 'myInput1', 'myInput2') )(FormWithError)
The final solution may be to store errors in the repository by implementing componentWillReceiveProps and submit an action to update the list of errors in the repository, but I don't think this is a really good idea. It is better to leave a simple component stateless to render the Field component.
EDIT 12/12/2018:
This last “solution” was not good when I published it. But since componentWillReceiveProps deprecated in React, this is not a solution at all. Please do not do this in your application. I do not delete this for the story if this answer was somewhere related.