Formik: ErrorMessage not shown when setting in onSubmit

Created on 23 Dec 2018  路  5Comments  路  Source: formium/formik

馃悰 Bug report

Current Behavior

Expected behavior

It should show the error messages

Reproducible example

Here is a sandbox example: https://codesandbox.io/s/640mw0n1kz

class ProfileForm extends Component {

  onLogin(values, {setErrors, setError, setSubmitting}) {
    setErrors({address: "asd"})
    setError("address "yess")
    setSubmitting(false)
    // error message is not shown, neither with setErrors nor with setError - no exception
  }

  render() {
    return (
      <Formik 
        onSubmit={this.onLogin.bind(this)}>
        {({ isSubmitting }) => (
          <Form>
            <Field name="address" type="text" placeholder="address"/>
            <ErrorMessage name="address"/>

            <button type="submit">
              Submit
            </button>
          </Form>
        )}
      </Formik>
    )
  }
}

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.4.1 |
| React | 16.1.1 |
| TypeScript | ? |
| Browser | Firefox |
| npm/Yarn | yarn |
| Operating System | OSX |

Most helpful comment

you need to set initialValues

All 5 comments

@jaredpalmer Could you tell me if this would be at least the desired behaviour? Or do I something wrong?

Happy Christmas by the way and thank you really much for this great library! 馃巺 馃巹 馃巵 鉂わ笍

I just found the issue, you have to set isTouched to true?
Bit unintuitive :/

worked with following code:

  onLogin(values, actions) {
    actions.setErrors({address: "asd"})
    actions.isTouched = true; // <---------------
    actions.setSubmitting(false)
    // error message is not shown, neither with setErrors nor with setError - no exception
  }

you need to set initialValues

Could you maybe show a warning when there are fileds without initalvalues? My colleagues and me tried formik again - and had the same problem all of us :D

For other readers: see here: #445

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jaredpalmer picture jaredpalmer  路  3Comments

jeffbski picture jeffbski  路  3Comments

Jucesr picture Jucesr  路  3Comments

jaredpalmer picture jaredpalmer  路  3Comments

jaredpalmer picture jaredpalmer  路  3Comments