Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Errors not passed into onSubmitFail

See original GitHub issue

errors in the onSubmitFail is not being populated for me. Am I doing something wrong or is this a bug??

import React from 'react';
import { Field, reduxForm, SubmissionError } from 'redux-form';

const Password = (props) => {
  const { handleSubmit, submitting, error } = props;
  const submit = () => Promise.reject(new Error('test'));
  return (
    <form onSubmit={handleSubmit(submit)}>
      <div>
        <label htmlFor="password">Password</label>
        <Field name="password" component="input" type="password" placeholder="Password" />
      </div>
      <h1>{error}</h1>
      <div>
        <button type="submit" disabled={submitting}>Next</button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: 'password',
  onSubmitFail: (e) => {
    console.log(e); // shows undefined
    throw new SubmissionError({ _error: e.message });
  },
})(Password);

Issue Analytics

State:
Created 7 years ago
Comments:15 (1 by maintainers)

Top GitHub Comments

14reactions

gustavohenkecommented, Dec 6, 2017

Because this issue saw almost no activity for a few months, I’m closing it.

2reactions

vinhtqcommented, Jan 4, 2018

const renderField = ({
  input,
  type,
  icon,
  placeholder,
  meta: { touched, error }
}) => (
  <div className="field">
    <div className="ui left icon input">
      <i className={[icon, "icon"].join(" ")} />
      <input {...input} placeholder={placeholder} type={type} />
    </div>
    {touched && error && <div className="ui negative message">
      <div className="header">
        {error}
      </div>
    </div>}
  </div>
)

function submit(values) {  
  if (!values.email) {
    throw new SubmissionError({
      password: 'Required',
      _error: 'Login failed!'
    });
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    throw new SubmissionError({
      password: 'Invalid email',
      _error: 'Login failed!'
    });
  }

  if (!values.password) {
    throw new SubmissionError({
      password: 'Invalid password',
      _error: 'Login failed!'
    });
  }
}

let LoginForm = props => {
  const { handleSubmit, submitting, error } = props;

  return (
    <form className="ui form" onSubmit={handleSubmit(submit)}>
      <div className="ui stacked segment">

        <Field component="input" type="text" name="email" placeholder="E-mail address" icon="mail" component={renderField} />

        <Field component="input" type="password" name="password" placeholder="Password" icon="user" component={renderField} />

        {error && <strong>{error}</strong>}

        <button type="submit" className="ui fluid large teal submit button" disabled={submitting}>Login</button>
      </div>
    </form>
  );
}

LoginForm = reduxForm({
  // a unique name for the form
  form: 'login'
})(LoginForm);

export default LoginForm;

I had the same issue, error in props always give out undefined