CODEWITHSUNDEEP
reactjsformikstorybook
Mufasa
Mufasa

Reputation: 387

React storybook showing formik form with errors

What is the simplest way to force a formik form to show fields in error?

I would like to this for a react storybook to show what our form looks like when a field has an error in it.

Each field in my form will only display an error if it has been touched and its value is not valid.

I can set the initial value of the fields but I can't figure out how to mark then all as touched so that the errors are displayed.

Upvotes: 3

Views: 1181

Answers (2)

Michele
Michele

Reputation: 101

I managed this by setting initialErrors and initialTouched for the fields I wanted to display the error state for, in addition to setting initialValues.

In the Formik docs:

eg.

<Formik initialValues={} initialErrors={} initialTouched={}>...</Formik>

This worked in stories using both a decorator Formik component wrapper as well as the storybook-formik addon.

Upvotes: 1

Jonathan Irwin
Jonathan Irwin

Reputation: 5767

The Formik test for ErrorMessage might be of some use.

Note the use of setFieldError and setError

Upvotes: 1

Related Questions