Redux-forms - Errors prop is undefined

Question

I am using 'redux-forms' in my app and have a validation function passed to the form container component for sync validation. When I input an incorrect value in one of the fields, I get displayed the error message inline (under the field), however, the error prop is still undefined as passed by the container component to the form react component.

The form code:

const LoginFormComponent = props => {
  return (
    <div className="formContainer">
      <form>
        <Field name="email" label="Email" type="text" placeholder="email" component={InputComponent} />
        <Field name="password" label="Password" type="password" placeholder="password" component={InputComponent} />
        <button className="btn" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

const LoginForm = reduxForm({
  form: 'loginForm',
  validate: validateLoginForm
})(LoginFormComponent);

export default LoginForm;

The updated props sent to the above React component are:

anyTouched: true
array: Object { insert: bindActionCreator/<(), move: bindActionCreator/<(), pop: bindActionCreator/<(), … }
asyncValidate: function Form/_this.asyncValidate()
asyncValidating: false
autofill: function bindActionCreator/<()
blur: function bindActionCreator/<()
change: function bindActionCreator/<()
clearAsyncError: function bindActionCreator/<()
clearFields: function bindActionCreator/<()
clearSubmit: function bindActionCreator/<()
clearSubmitErrors: function bindActionCreator/<()
destroy: function bindActionCreator/<()
dirty: true
dispatch: function dispatch()
error: undefined // <===== this is the value I am looking to get
form: "loginForm"
handleSubmit: function Form/_this.submit()
initialValues: undefined
initialize: function bindActionCreator/<()
initialized: false
invalid: true
pristine: false
pure: true
reset: function bindActionCreator/<()
submit: function bindActionCreator/<()
submitFailed: false
submitSucceeded: false
submitting: false
touch: function bindActionCreator/<()
triggerSubmit: undefined
untouch: function bindActionCreator/<()
valid: false
validate: function createValidator/<()
warning: undefined
__proto__: Object { … }

Notice the error key has a value of undefined

As per request, the validation function is:

const validateLoginForm = createValidator({
  email: [checkEmail, checkRequired],
  password: [checkRequired]
});

export function createValidator(rules, params) {
  return (data = {}) => {
    const errors = {};
    Object.keys(rules).forEach(key => {
      const rule = join([].concat(rules[key])); // concat enables both functions and arrays of functions
      const error = rule(data[key], data, { key, ...params });
      if (error) {
        errors[key] = error;
      }
    });
    return errors;
  };
}

const join = rules => (value, data, params) => rules.map(rule => rule(value, data, params)).filter(error => !!error)[0];

What am I doing wrong. Just to clarify that the validate function is returning an errors object.

Answer 1

I too get the same props.But I get the error object in sync errors.