DEV Community

Cover image for No more tears, handling Forms in React using Formik, part II

No more tears, handling Forms in React using Formik, part II

Chris Noring on March 23, 2019

Follow me on Twitter, happy to take your suggestions on topics or improvements /Chris This is the continuation of our first part on Formik, the a...
Collapse
 
marcelgeo profile image
MarcelGeo

Is it possible to use validationSchema and async validation simultaneously for one Formik Component? Thanks for usefull tutorial. Yup looks mutch smarter than AvForm in Bootstrap.

Collapse
 
softchris profile image
Chris Noring • Edited

I believe so.. Let me see if I can come with an example of that to show how..

Yea here I have such an example github.com/softchris/formik-exampl...

Collapse
 
_ali_ profile image
ali • Edited

Hi Chris,
I tried using Formik,Yup and MaterialUi together. But it seems like there is a considerable lag when typing in the textfields (of the materialUI) present in the form. The form that I'm using contains many inputs, maybe why the lag is being caused. Any way to avoid this delay ?. Also is there a full rendering of the component, when the validation is done ?

Collapse
 
emielvangoor profile image
Emiel van Goor

My best guess is that the validation is triggered on every keystroke. You should try to disable it with

validateOnBlur={false}
validateOnChange={false}

Collapse
 
mvarsakelis profile image
mvarsakelis

Thanks Chris. This was a really good article. I have implemented a form with Formik and got all the validation hooked up. For the last week I have been struggling on how to show an alert on success or failure after the submission. In my case I call an API to add a record to a database. If a record was successfully added the API response will have stuff and I display a success alert. If it fails the response is empty and I display an error alert. What I want to do is retain the form field values so if there was an error the form is not blank when I close the alert.

I feel like this is something to do with the state of the form and/or fields and that I need to do something in the on submit. Like ...values or ...prevState or something.

This is currently my onSubmit area of the form:

        onSubmit={async (
          values,
          { resetForm, setSubmitting, isSubmitting }
        ) => {
          apiService.addCompanyMaster(values).then((response) => {
            setApiResponse(response)
            setShowAlert(true)
          })
        }}
Enter fullscreen mode Exit fullscreen mode

Thanks in advance if you have any hints

Collapse
 
ambroseus profile image
Eugene Samonenko

it was very interesting challenge to combine Formik, yup, material-ui and react-select 2... and it works all together! :)

Collapse
 
ambroseus profile image
Eugene Samonenko

one feature was very helpful in case of using redux with data for initialValues: enableReinitialize

Collapse
 
psycho5 profile image
Sagar Baver

Hey Chris!

I believe you meant to use <Form> built-in component in your first code snippet instead of <form>.

Collapse
 
softchris profile image
Chris Noring

aah... thank you :)

Collapse
 
slick profile image
Majid Shah

This article is amazing , you have explianed it very well. Please make part 3 touching useFormikContext() and handling parts of form in child components