Formik Multi-Step Form with Material UI | React JS Forms Tutorial
Вставка
- Опубліковано 12 вер 2024
- In this video we explore how to create a multi-step form (wizard) in ReactJS using the Formik 2 library, Material UI, and Yup!
We'll cover the fundamentals of formik, how to create reusable fields using useField, how to perform validation with yup schemas, how to set up on submit logic, and of course how to split up a large form into multiple validated steps.
We will also be writing this React application using TypeScript. Let me know what you think!
Marius, thank you for this in-depth and very professional tutorial. I was able to leverage what you showed me. Thank you.
Thank you so much! this was the complete tutorial I was looking for.
You're welcome!
Marius, thank you a lot for this tutorial, it was very helpful! 🤗
You are amazing Marius
Tried it out and worked - Thanks!
awesome! glad you were able to follow
Thank you so much! Amazing tutorial!
You’re welcome!
Nice. What about adding logic between forms, eg: based on the input in a field on form1, the value of a field on form2 is selected.
yeah that’s possible. Remember we’re saving the snapshot at each page and that becomes the new initialValues on the next page. Meaning each should have the values from the previous pages
Bro, are you made multi step form in next js
Amazing, thanks for this :)
You’re welcome!
Hay Marius, thank you a lot for this nice tutorial. I have one question, if I want to add Language switcher to this page, how would you handle translations and current local?
I would suggest looking into internationalization libraries which would handle that stuff for you
Hi Marius, what would be the correct typing for the FormStep component instead of using "any"?
hi Marius, nice tutorial!
how about formik Multi-Step with FieldArray?
Hello, Marius! amazing video as well. I was wondering in the case that I wanna have an input that upload files or images... How would you do, because the inputfields are only configurated to receive strings or numbers. Thanks!!
You can get formik to handle file uploads as well although it might not be documented well. You’d have to create a different component that is using . Hard to explain in a comment though, I can maybe do another video sometime but in the meantime there are a couple examples you can easily find on stackoverflow
@@mariusespejo yeah marious! Thats the issue. I know how to upload files with formik, but with the kind Of genéric inputfields I am not finding the right way to do it. Would really appreciate the help. Thank you so much
You can post the github repo? in my project, I can't move forward, but I folllow the tutorial step to step with the video
Amazing thank for this.
How to create select like textfield.
Can you share your code?
Is there any way to tie the keys in the yup object to the formik initial values? Or visa versa? That way you don't forget to add or remove something through redundancy.
Yup is really mostly for parsing/validation, it’s not really meant to generate objects itself. I suggest using unit tests to make sure your validations perform as expected… then you’d get test failures if something wasn’t synced up with the schema properly
Hey Marius, thanks for your video! Any idea how to hide an entire step based on a value in a previous step? Can't seem to figure this out!
You’d have to do that logic at the parent and basically boolean toggle the step based on current form state value
@@mariusespejo thanks for fast reply! I just figured it out, i actually passed a prop down to input that toggles state of parent, then that state determines if the step is displayed or not!
That works! Glad you figured it out
Hi, don't know why my back button is submitting the form even I have passed type="button". Can you help me?
Typically passing type button is correct, are you sure you’re not invoking the submit in your back button event handler?
Do you have the source code for this project?
The formik repo has an examples folder with the multistep wizard example in it, that’s pretty much the same thing
Can you create a video on stepper
Which would look like this
O
0 ---------- 0 ----------|
O
Step1 Step2 Step3
Thanks
Why is the snapshotting needed? It doesn't seem like it would do anything since once you start filling in fields the values are saved in formik's values property no?
good question. In my example here it’s not super relevant, you can get away without it. However it’s main purpose is to allow you to have access to the values within the parent component which itself is rendering fomik. You can typically get access to values via the formik context but you’d have to be a component rendered as a child of formik, parents won’t have access. Saving the snapshot in the parent on step submit allows you to keep track of those values in the parent, and in some situations you might use that snapshot to change what’s rendered. For example maybe page 1 choices/values affect which page 2 is shown
@@mariusespejo That makes sense, thanks for the response
no problem!
Hi, does this still work? been following up from 18:03 where you use field config to satisfy the props error however that does not fix the problem that I get.
This video is a couple years old, I would suggest double checking against current docs
hey pro ,how do you solve the bug??
im strugling with the same problem how did you fix it ?
I get Property 'stepName' does not exist on type 'IntrinsicAttributes & Props'. :\
Are you sure you have it defined in your prop type definition?
Hello!, how can i wait for a submit on a form before moving to the next step?
Notice in the tutorial that you can pass an onSubmit prop to each step, and we await that before moving to the next step, so what you’re asking for is already there
nice
please ho to validate email.. run time with server side thanks
well that would depend on your backend stack of choice. I have content on Nestjs and others which cover validation if you’re interested
try React hook form instead sir
you can’t really go wrong with either formik or react hook form, both are great just slightly different strategies
@@mariusespejo thank for you advice sir
Too many libraries, I want to make the same thing with just Material UI.
Hey Marius amazing tutorial man, thanks for making it.
I just have a question regarding the validationSchema yup object, is there a way to add all of the different steps validation within the same object instead of having an initial object for the first step and then having to add the validation on each different step as you did on the video ?
Kinda like:
const validationSchema = yup.object({
name: yup.string().required("Error message here"),
email: yup
.string()
.email(
"Please enter a valid email"
)
.required("Error message here"),
street: yup.string().required("Error message here"),
country: yup.string().required("Error message here"),
});
I ask you cause if I try this approach the form does not take you to the second step since I guess that is validating these inputs which do not pertain to the first step...
Thanks and happy holidays :)
Yeah I’m not sure that with this pattern that there is a way to do it, exactly because as you said it will try to validate the entire object. Although a way to technically pull it off is to NOT submit per page but instead only submit at the last page, but then you’ll have to build extra logic to do something like “you have an error on page 2”. Note that if your main goal is to simply combine it all into one schema and do a final validation at the end, then you can append the different schemas together into one, and have some sort of review screen which would have a submit validating the entire set
Hi , can u please add unit testing
I do have some videos on unit testing react in my channel
Please add git hub repo
lol
Why u use ts broo 😪😪
😁
Gotta give this a thumbs down for not sharing the code (what kind of a lame excuse is that that it's pretty much the mutli step in the formik's repo?!)
¯\_(ツ)_/¯