OMG, I just opened UA-cam and saw you’re notification, I came faster than a rocket hahahaha great vídeo my friend, you’re always bringing the best content thank you 😊
Fantastic video and super helpful! This should be in the Formik docs. Also very very respectable that you tell people that you're just doing styling at 29:00 so if they don't care about then then they don't need to watch anymore 🙌
OMG Buddy, this is the first video I saw of yours and after banging my head on wall for 2 days to be able to do a formik and stepper together and also fetching the values with validation, uhhh, I finally found this and it worked so so well for me, Thank you so much. Keep going, I instantly subscribed . Thanksss a Lottttt
I'm having to make a form with these exact technologies- I'm unfamiliar with materialUI and Formik. Your video is VERY clear even to someone that isn't comfortable with some of the tech. I especially like how you first do a "naive" approach and then build into a more optimized version. I am looking at the code for each step and just think "wow that's genius and makes a lot of sense". Thanks!
That video is amazing! Thank you, it was a very beautiful explanation. The only thing I changed from your sample was the material UI component because I use Tailwind in my project so I had to add the ErrorMessage component to showing the validation messages with the TW style classes. But the logic is simple and clear to understand. Won a subscriber already!
Thank you very much Tom =D I have to try tailwind, there's a lot of good words about it on the community, but I'm so in love with Material-UI that I think it will be hard to leave material-ui behind =D eheheh
@@BrunoAntunesPT How would I add a function for a click on a button within a FormikStep that would allow me to update a field value in the initialValues object? I have 3 buttons or divs that when clicked on would set the field.
Sorry I only saw your 2 comments now and I'm very happy you were able to fix it 😊😀😀 Yeah, at the beginning it might be a bit scary, but after a while it becomes better, trust me 😀😀
That is soooooo good to read my friend!!! I'm very happy for you. The best of luck on the interviewing process =D Let me know when you have the results. I have my fingers crossed for you ;)
I'm using both at the moment - for some reason my brain still prefer formik (probably because I'm using it for soooo long), but I can see clearly why someone would prefer form-hook. Someday in a not so distant future I'll drop a video using form-hook 😅😅
Thank you 😍 I'll do material videos by the end of the year or worst case January 🙂 this last months have been very hard to find time to record, sorry 😔
😂😂 ahahah Muito Obrigado Rodolpho 😁😁 Gostarias que eu fizesse algum video antes de iniciar (ou durante) a serie "React.js for beginners"? Todas as sugestões sao muito bem vindas 😍😍
Thank you, I'm glad it was helpful! 😊 If you want more in-dept details about formik and yup, in this video description you can find a link to another video Formik+Yup video (ua-cam.com/video/kYyaJyTLjpk/v-deo.html). I hope you find that one useful 😍
This was a great walkthrough. Thank you for making this! Quick question. How would you handle the multi-step form if every field resided in its own component? Would you import the FormkiStep into each component? Looking at the code, it seems pretty straightforward when all of the form fields reside in the same file, but I'm not sure how to tackle this when I'm dealing with 12+ form fields all encapsulated in their own components.
@@BrunoAntunesPT quick question, why did you pass onSubmit={async (values, helpers) ? i cantr see 'helpers' args being used anywhere? thank you again, Bruno :)
@@BrunoAntunesPT I was working with formik-material-ui switch and in the new versione if the type is missing in the attribute it does not work, in the 3 major release. Thanks
😊😊😊😊 This is the video you requested a while ago! I was about to say your name during the video, but I didn't knew if you would be upset if I mention you =D eheheh
@@BrunoAntunesPT really appreciate that. it was great seeing how it can be done. Wondering whats next. Gonna keep using it (like the rest of your videos) as a reference
Hello bruno , just a suggestion. Add the video playlist link to every video description ideally on the very top. Will probably also help with getting some more views . Greetings
Thank you very very very much for the suggestion Medy 😍😍 I'm really new to this youtube thing - Please, if you have more suggestions let me know. Tonight I'll update all the videos to have pointers to the playlist they belong to 😊😊
@@BrunoAntunesPTure welcome. btw your diagrams are aweseome ;) to exlain the concepts. I can totally see your experience shining through making it easy for you explaining complex topics in a simple way. If you enjoy them. Maybe target some even more beginner topics with potential bigger reach... just a thought You could also split up some videos ... to have less intimidating video length ... 10 - 20 minutes ... though I feel like.. once more ppl know you this wont be an issue I clicked anyways^^ ... Authentication is currently nagging me abit. Im still lacking a broader view what to choose for authentication... it seems like any of that stuff has its flaws ... Im very interstied in this because I care about having at least basic security for when I built some stuff.... . so as a beginner I would like to have " autetnication that isnt too hard to implement but for the most part safe" I found some basic aproaches here. But I still wonder if one should bother when there are options like firebase or strapi... In case you actually start building a real project. What would you pick for a small project .. and breath somewhat easy knowing that the next guy who just knows a tad about authentication cant crack open your system xD ? ! So in a sense I want smth where you can say "this should be somewhat safe"... for my first projects xD Anyway Im excited to see more. Greetings
All your tips are amazing my friend!!! Thank you very very much, you are amazing ♥️ Regarding authentication, in order to be easy, probably the best bet is to use passport with Facebook /Google/twitter autentication when possible. I have to prepare a video like that in the future. I think it will help people to have a secure and easy authentication system 😍😍😍 Once again you are amazing my friend, thank you, thank you ♥️♥️
@@BrunoAntunesPT Nah man you are amazing :D... My advice may not help much:D ... But mabye worth a try. A video to demontrate " what is a basic -/ secure" authetnication ... would be great. I mean for starters anything that works is fine .... but I have that little voice that is asking "but what if you app grows even a little " can I trust my own authentication or should I better trust google or firebase xD ... Greetings
Sorry Medy, for some reason I lost your comment =( Honestly lately I have been working quite a lot with auth providers like Facebook and Google. Looking into my analytics, I'm really really really tempted to completely remove my custom authentication system (almost nobody is creating accounts with email+password). I'll do some more analysis on this =D
Loved this tutorial. Can you show us how to introduce options between two textfields? Where the user can choose either a specific textfield or they can choose the other textfields to fill.
Thank you my friend =) I don't know if I fully understood your example. If you can give me a practical example, probably it will be easier for me to understand =)
@@BrunoAntunesPT imagine if there's a website which allows us to POST books. Imagine if we're trying to write a book from scratch. We have to give it a title for the first time. And then move on. But if we've already written somepart and then we're returning later on, so now we have to choose from the available books (so that we can carry on from where we left of) I hope I didn't make this more confusing 😅
I think I got even more confused now 😅😅😅 probably because it's weekend and my brain is lazy 😂😂 Do you have any application doing that? If you can send me the url I think it will be the easiest way for my lazy brain to understand it 😅😅
@@BrunoAntunesPT okay so imagine if there's an option to either choose from an available list or add a new one to the list. The user can choose only one option. The one he chooses will change the state
Ahh you want some fields validating some other fields, cross-field validation? Can you just watch the first 35 seconds of this video to let me know if this is what you want? ua-cam.com/video/kYyaJyTLjpk/v-deo.html
Thank you my friend 😍😍 Yes, it's very possible to have just JavaScript without any TypeScript for this example! I created this codesandbox in pure JavaScript: codesandbox.io/s/dry-architecture-kfmd7?file=/src/pages/index.js Let me know if that is what you were looking for 😃😃
If you are learning and you don't mind, I'll give you a tip 😃 When you see any typescript code that you don't know how to convert into JavaScript, you can put it over here: tsplay.dev/oN5A9N One the left you can see my typescript code (from this video), on the right, the "converted" JavaScript code 😃
Are you asking about having different components for each step? If that's the question, absolutely, it will make the code much easier to read 😀 Regarding the validation we have validation per step. You can also have global validation but having it per step seems easier to read for me 😅 Sorry if I misunderstood your question 😅😅😅
Thanks Bruno! Amazing tutorial! I am just having an issue, that after the first step Formik sets all fields to touched, so if I have a few fields in the second step as soon as I write in one of them all the validations show up on the other fields, I assume since they are all touched. Any solution? thanks.
Thank you very much =D Yes, did you check my repository? I did a commit at the time in the repository to fix that small issue that I missed while recording. The specific commit is this one: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/c7924e8b7d80d24f7aa227cae1c52f554ff503a5 Let me know if it fixes your issue :)
@@BrunoAntunesPT Thanks! I didn't know you could use setTouched with an empty object to reset. I ended up using resetForm with the old values, but this is much better. Really appreciate your quick reply. subscribed!
Hey Bruno, loved the video! Any chance a license (e.g. MIT) can be added to the github repo because I want to be respectful of your code and would like to use it for one of my projects! Thanks :)
Thank you very much Yousef!!! Yes, of course!!! All my code is public and you can do what you want with it =D I added a License.MD (MIT) to my 2 last repositories =D If you want I can add it to any other repository =)
Thank you! This was a rare video with grateful informations. I just have a question that how we use formik props like 'setFieldValue' or 'values' on parent. Forgive me for this question, since I am junior.
I figured a way out but I didn't test it fully Wrapping FormikStep with FormikPropsProvider and passing props as function may work {(props)=> 'child components field etc'} { return React.createElement( FormikProvider, { value: formik, }, children(formik) ); });
Hey, Bruno, thanks for the awesome video!!! I have a question. Can I pass the 'touched' and 'errors' props into ? I wish to define classNames in depend on 'touched' property, and then highlight the fields with errors.
Thank you 😀 Formik provides a hook called useFormikContext 😀 I think that's all you need inside your formik step plus a render prop on the children of the formik step 😊
Hey Bruno! Awesome tutorial, as always. I have one question: validationSchema={currentChild.props.validationSchema} is what you have written. currentChild has been typed like this: const currentChild = childrenArray[step] as React.ElementType; and FormikStepProps give access to the following properties: export interface FormikStepProps extends Pick { } So, my IDE complains on the first line of code I've written in this answer ( the validationSchema= ...) TS2339: Property 'props' does not exist on type 'ElementType'. Property 'props' does not exist on type '"symbol"' I really like the "Pick" variant, coz it helps other developers instantly knowing what they can access. So is there a way to keep it even when accessing props like this? Adding props to Pick defeats its whole purpose
Thank you my friend 😀😀 I don't get any warning/error using vscode. Which editor/ide are you using? BTW executing "npm run build" do you get any error/warning? That is the "source of truth" 😊
@@BrunoAntunesPT build fails because of this. I made a public repo for you to check it out: github.com/Leviathan91/Examples/tree/master/formik/formik-multistep I am using IntellIJ IDEA, because of the the java background / android programming I'd really like to keep it :)
I don't have access to a laptop right now, but looking into your code and mine you are using ElementType in the first 4 lines of FormikStepper and I'm using ReactElement. I'm almost sure if you change it to ReactElement instead of ElementType you'll solve the issue 😀 Let me know if it worked out my friend 😍
Hi Bruno! Great video, as usual!! I leave a request in case you need ideas: how to handle user authentication in the server side in order to avoid flickering. I currently use getserversideprops for each route that I want to "protect", but maybe you know of a better way :)
Thank you =D What do you mean by flickering? Flickering between you going to the login page and other pages? Or between normal pages? Sorry, I'm probably missing something :)
@@BrunoAntunesPT Hi Bruno! Thanks for replying!! I'll try to explain myself better: if we have the "/signin" route and I am already signed in, If I don't use the getServerSideProps to know if the user is already logged in, the server will render the signin form, and when the client loads it will redirect or show something else like "you are already logged in", thus provoking the flickering. This would happen in all the user protected routes. Then the question is what would the better aproach/pattern to solve this problem about the logged in user. Thank you again for the answer and for all the videos, they are top-notch material!!!
If you don't do anything server side (getServerSideProps or getInitialProps) and navigate to /signin you'll be shown that page. A few (milli)seconds later your javascript finishes downloading, parsing and runs.... if you are not logged on nothing happens, but if you are already logged in it shows that message, hence you seeing the flickering. You saw signin page and now the new message. If you rely only on javascript client side you'll have that 😊
This component is really awesome, but i has a problem. I need to access formik context for a depend select combos. For example, i have 3 levels, country, state and city, in each level i need to access my api to fill select combos. I dont know how to use handlechange (i am try handleblur) and i dont know how to use formik context to access country and state for fetch list of cities. Any help please.
Thank you very much =D You are lucky today =D I already have a branch on that repository using the formik context, to show a full name on other step :) That branch is here: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c/src/pages/index.tsx#L167 "The magic" happens in the last 10 lines of that file :)
Thank you Bruno! This was a great tutorial. One thing though, when I go to type in the first name field, I get the following warning in the console: Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. Any idea what could be causing it?
Thank you Steve =D Usually what you are seeing is because you are setting the initialValues with undefined (or null). For example: will trigger the warning you are talking about. If you have you shouldn't see any warning/error. If you clone directly my repository, for example using codesandbox, you'll not get the warning :) ==> githubbox.com/bmvantunes/youtube-2020-june-multi-step-form-formik Let me know if this fixed it, otherwise it can be something else (if you can share the code you are doing, that will help as well) =D
@@BrunoAntunesPT My initialValues looks exactly the same as yours 🤷🏾♂️ I've put my code in a gist here: gist.github.com/Steve-Reid/9d3481e0c8b591a8065567e7448e51d8 Thanks for your help 👍🏾
I think I spot the error =D On line 41 where you have: name="firstname" change it to be: name="firstName" in the initialValues you have "firstName" (capitalized N) and in line 41 "firstname" (without N being capitalized) =) Give it a try and let me know if the error is gone =D
Hello Bruno, What is your opinion about react hook form ? I find it more satisfying, if you think its great tool and if it is convenient could you make one video on it ?
I think they are really great libraries to work with forms. Currently I prefer to use formik, mainly because I'm used to it - this can change in a few months as I get more familiar with react hook form 😀 This also means you can probably expect a video about it in the next 2/3 months as/if my opinion changes 😀
Very helpful tutorial Bruno, thanks a million. I have a quick question, please can you share how to use useFormikContext to pass the touched and errors value to the FormikStep and how to access it in FormikStep. Thanks once again.
Great tutorial! However, how can i validate each step using server-side validation? For example, when i enter the email on the first step and i want to check if it already exists on the database.
Thank you 😍 You can have async validators with yup. Let me copy one of their documentation examples: // or make it async by returning a promise let asyncJimmySchema = string().test( 'is-jimmy', '${path} is not Jimmy', async (value, testContext) => (await fetch('/is-jimmy/' + value)).responseText === 'true', });
Hi Bruno, amazing video! Is it possibly to make it so that pressing the browser back button does the same as the back button on the form (if we somehow make steps have different URLs)? Or I can only show the users a popup so they confirm that they want to leave?
I would do the following: 1 - create a page: src/pages/my-page/[stepNumber].tsx 2 - take advantage of shallow routing - nextjs.org/docs/routing/shallow-routing 3 - every time you change step do something like router.push("/my-page/3", undefined, {shallow:true}); I did an example using shallow in the car trader app video 4 that might be useful to understand the concept. Video playlist: ua-cam.com/play/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3.html
Hi Bruno, I am back here, I followed your NextJS tutorial last time ;) thank you. I am wondering if maybe it is feasible to have a table with search bars and filtering in one of the step ? or is it only for small forms ? thanks
@@BrunoAntunesPT thank you !! yep I do. Thank you so much for your quick response :) last time you really helped us with next, my team and I scored a good grade at our coursework !! thank youuuu
That's awesome 😀😀 I'm very happy you all were able to score a nice grade 😍😍 Thank you soooo sooo much for letting me know that experience, it really makes me feel happy 😀
No worries 😀 Yes, you can use JavaScript, even though I would recommend TypeScript 😀😀😀 If you want to see this video's code in JavaScript, please check this: tsplay.dev/oN5A9N PS - You can put any typescript code there, and it "gives" you the javascript code. I hope this helps 😀
You are amazing my friend, this was really really helpful! I wanted to ask you if it is possible to add a custom onClick() listener to a formik field without overriding the default formik one?
can I ask why you want to add an onclick? 🙂 Usually there are better ways than using onClick That being said, Formik doesn't use onclick. They use value, onchange, onblur etc, but no onclick 🙂 So if you add an onclick you should be good 🙂
@@BrunoAntunesPT I need to show a select component only when I click on a specific radio button and I thought if add an onclick function on the radio button that toggles the values of a certain state hook I can achieve that, you think there's an easier way?
I had almost a book written here in the comments trying to explain why using an onclick in that scenario would be a bad idea, but then I decided to delete my gigantic comment and create a demo for you without the onclick =D The demo also does sanitization, meaning if you select an option in the dropdown and then select another option in the radio button, after you submit you end up with a value WITHOUT the dropdown value (if you don't like that, just delete the if inside the onSubmit). I think I put every single detail in this codesandbox and in the end it was faster than my "book" and hopefully gives you much more value than my "book" xD codesandbox.io/s/elated-shape-m681g?file=/src/App.js
Hi Bruno, I heard in your videos that jss will be dismissed from material-ui for styling the pages. I understood that the jss will be replaced bt emotions ??? I'm not sure about what you said. Do you confirm that jss will be replaced by emotions ?? Thanks in advance
Redux I'm no longer using it, so most probably there won't be a video about something I no longer recommend 😊 Regarding context we might do one sooner or later 😉
Hi! how are you? if you have a error when you submitting form and need back one step for modify one input, how to manage errors in this case? In my case, formik, show errors in inputs when back one step because formik change the values. I need help
Olá Bruno Antunes, tenho uma dúvida e gostaria que você me ajudasse; Como eu faço para acessar as props do formik como isSubmitting, values, setFieldValue dentro dos formikSteps? Eu sou iniciante, e preciso construir um form e não estou sabendo como.
This is very useful, can you please tell how can we use form values from steps ? For example, how first and last name from Form Fields can be used to show formatted Full Name in same form ? Regards.
Thank you my friend =D I ended up coding one possible solution at github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c Let me know if this is helpful - It shows on step 2 and 3 the message "Hello, {firstName} {lastName}!" =) PS - You have at least 2 other possible ways to implement this that will be cleaner in the long run, but this one is probably the simplest if you intend to use it only once or twice :)
That's because we are using formik-material-ui 😃 You can have a look into their documentation here: stackworx.github.io/formik-material-ui/docs/guide/getting-started
Thank you 😊 At the end of each video I commit the code as is to github without any change 😊 In the video description I always have the link to the repository, in this case from the video description: Github Repository: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik I hope you find the code helpful/useful 😊
You want to be able to print it to a PDF and have one section per page? Sorry I'm a very confused right now 😅 If you want to build the different sections on a page and allow them to grow as you add more, then you don't need to do anything, meaning no special code on your side for that to happen 😊
@@BrunoAntunesPT to keep it simple, how to achieve the layout in page 2 of the pdf (Primary Contact) in Formik, which should be responsive. If we could push the form data to mongodb, that would be super cool.
Hi Bruno. Thanks for the great video. I'm making a very similar project so I stumbled upon it and it really helped me. :) I was wondering if you could help with perhaps another video showing how to implement the formik-material-ui Lab Autocomplete component. I've got it implemented in my project and it is working visually, but i can't figure out how to make it update the formik values or maintain it's value in the UI as I navigate back and forth between page steps. Thanks!
Great video as always. I have one question, the validation on each step is great and working fine for UI side but how to deal with serverside validation which doesn't care about steps and only cares about whole form. For example, you submit to the server and it gives you error on field email as "Email already exists", and email field is in first step of our multi step form, how to locate to exactly that email field when there's an error from server side?
Thank you my friend 😊 In those cases I think async validation will help you for the email example 😊 In case you don't want to use it, you have two options. Keep a map of what field is in what step and when you get errors go to that step (or the step of the first error) Some apps I also saw expanding all the steps into one when that happens, even tho, I don't love that 😅😅
Learn how to Unit-Test this form: ua-cam.com/video/MhFSuOjU624/v-deo.html
This was really huge! Advanced contents about formik and typescript, many thanks! Continue like this and you'll be a millionnaire soon :)
Wow, thank you very much! I wish your prediction is correct =D =D =D
OMG, I just opened UA-cam and saw you’re notification, I came faster than a rocket hahahaha great vídeo my friend, you’re always bringing the best content thank you 😊
Thank you very much my friend Washington 😊
Your comments are always super friendly, thank you!!! 😊😊😊😊
Fantastic video and super helpful! This should be in the Formik docs. Also very very respectable that you tell people that you're just doing styling at 29:00 so if they don't care about then then they don't need to watch anymore 🙌
Thank you very much 😍 I really appreciate it 🙂🙂
OMG Buddy, this is the first video I saw of yours and after banging my head on wall for 2 days to be able to do a formik and stepper together and also fetching the values with validation, uhhh, I finally found this and it worked so so well for me, Thank you so much. Keep going, I instantly subscribed . Thanksss a Lottttt
Thank you very much 😀😀
It is soo good to read your comment - I'm really really happy I was able to help 🙏🙏
Finally found it ! was looking from days,,, Good work here.
Thank you very much Danish 😍😍
I'm having to make a form with these exact technologies- I'm unfamiliar with materialUI and Formik. Your video is VERY clear even to someone that isn't comfortable with some of the tech. I especially like how you first do a "naive" approach and then build into a more optimized version. I am looking at the code for each step and just think "wow that's genius and makes a lot of sense". Thanks!
That video is amazing! Thank you, it was a very beautiful explanation. The only thing I changed from your sample was the material UI component because I use Tailwind in my project so I had to add the ErrorMessage component to showing the validation messages with the TW style classes. But the logic is simple and clear to understand. Won a subscriber already!
Thank you very much Tom =D
I have to try tailwind, there's a lot of good words about it on the community, but I'm so in love with Material-UI that I think it will be hard to leave material-ui behind =D eheheh
I lack the ability to express how amazing you are because I've been rendered speechless from your genius! Thanks again Bruno!
I'm very happy by your words ☺️☺️ thank you soooo much Danny ❤️
@@BrunoAntunesPT How would I add a function for a click on a button within a FormikStep that would allow me to update a field value in the initialValues object? I have 3 buttons or divs that when clicked on would set the field.
NVM. I simply looked at the documentation and was able to figure it out. Sorry, but Formik is a little intimidating. 😬
Sorry I only saw your 2 comments now and I'm very happy you were able to fix it 😊😀😀
Yeah, at the beginning it might be a bit scary, but after a while it becomes better, trust me 😀😀
This helped me so much in a job interview. If I get that job I have you to thank. God bless you.
That is soooooo good to read my friend!!!
I'm very happy for you. The best of luck on the interviewing process =D
Let me know when you have the results. I have my fingers crossed for you ;)
Thank you so much! Bruno Antunes. This is just what I had been looking for and breaking my head over! That's a lot of time saved for me!!
Great to hear it saved you time my friend! =D
Thank you for the awesome feedback :)
Wow, I came for some quick answers for but left as a better coder having a better grasp of creating custom wrappers and using types. Thank you!
Super simple explanation and we need more React Js Examples Tutorials. Can we expect *React Form Hook* Tutorials?
Thank you.
I'm using both at the moment - for some reason my brain still prefer formik (probably because I'm using it for soooo long), but I can see clearly why someone would prefer form-hook.
Someday in a not so distant future I'll drop a video using form-hook 😅😅
Excellent! Just subscribed. Would love to see more videos on material-ui and react.
Thank you 😍 I'll do material videos by the end of the year or worst case January 🙂 this last months have been very hard to find time to record, sorry 😔
Finalmente, o mestre tá de volta!! Muito obrigado, vídeo incrível como sempre!
😂😂 ahahah Muito Obrigado Rodolpho 😁😁
Gostarias que eu fizesse algum video antes de iniciar (ou durante) a serie "React.js for beginners"? Todas as sugestões sao muito bem vindas 😍😍
@@BrunoAntunesPT Seria sensacional!! Se puder fazer o React junto com o Typescript então, melhor ainda!!
Bruno this is a great tutorial. I am studying all of these technologies and this video is exactly what I needed Thank you brother!!!
Thank you, I'm glad it was helpful! 😊
If you want more in-dept details about formik and yup, in this video description you can find a link to another video Formik+Yup video (ua-cam.com/video/kYyaJyTLjpk/v-deo.html).
I hope you find that one useful 😍
you are the best teacher on UA-cam coz you do your job with love.
Thank you my friend ❤️❤️ i love what I do 😍😍
This was a great walkthrough. Thank you for making this! Quick question. How would you handle the multi-step form if every field resided in its own component? Would you import the FormkiStep into each component? Looking at the code, it seems pretty straightforward when all of the form fields reside in the same file, but I'm not sure how to tackle this when I'm dealing with 12+ form fields all encapsulated in their own components.
YOU ARE A LIFE SAVER, I managed to use the same method on React Native. Thank you very much.
Awesomeeeeeeee 😍😍😎 One day I need to properly learn react native, but I'm very happy this worked there 😜😜
@@BrunoAntunesPT I had to tweak many of it, But the general idea still implemented and worked just fine.
That's still very good news 😅😅
You did great job 👍 , you are talented instructor by the way 👍
Thank you very much Ibrahim ❤️ your comment made me feel incredibly happy 😊 thank you my friend ❤️❤️❤️
I was not aware about YUP, thank you a lot! looks really good!
Thank you very much my friend 😀😀😀
Gosh! this was such a savior for me..thank you for taking the time to share :)
I'm happy I could help 😀 thank you Surabhi 😊
Thank you Bruno, you are a very pleasant teacher to learn from.
Thank you very much Noah 😀😀
This video is gold!!! how have I not came across your channel before, I DONT KNOW! :D
Thank you 😍😍😍
@@BrunoAntunesPT quick question, why did you pass onSubmit={async (values, helpers) ? i cantr see 'helpers' args being used anywhere? thank you again, Bruno :)
It's just the signature of the function 🙂
Such valuable information should be thanked! Great work Bruno
Thank you very much Martin 😍
Hi Bruno, thanks for your classes. I follow you and in Formik + MaterialUI it's very easy to learn from you. Best Regards !!
Thank you Vittorio 😀 very happy to read that 😍
@@BrunoAntunesPT I was working with formik-material-ui switch and in the new versione if the type is missing in the attribute it does not work, in the 3 major release. Thanks
@@BrunoAntunesPT I follow you very often, Best Regards !!
It's normal that from time to time things change a little bit
that's actually very healthy, it means they are innovating and improving 😀
exactly what I needed, great vid. subscribed
Thank you 😍😍
I love your style of teaching. Thanks for the help
Thank you for watching the video 😀😀
Best formik video till date and very useful and informative video series 👍👍👍
So nice of you saying that! Thank you very very very much =D
Thank you so much, i am stuck with these kin'a things
Happy to help
Wow Bruno, this is awsome !! Thx for sharing those advanced contents :)
Thank you Cedric, I'm very happy you found it helpful 😀😀
Man I liked your way
Thank you very much 😍😍
That was exactly what I needed.
Awesome!! =D
Very well explained. Thanks for making this video. May I ask how long it took you to get to this level of experience? Thanks
your explanation is incredible
Thank you very much Moises 😀😀
It’s just brilliant!
Thank you 😀
Hey Bruno, thanks for this video i learned lots from this video as beginners
That's awesome to read, thank you very much ❤️
Oh how i have been waiting. Super excited for this
😊😊😊😊
This is the video you requested a while ago! I was about to say your name during the video, but I didn't knew if you would be upset if I mention you =D eheheh
@@BrunoAntunesPT really appreciate that. it was great seeing how it can be done. Wondering whats next. Gonna keep using it (like the rest of your videos) as a reference
It was great fun creating this one =D
Thank you very much for the suggestion =D
@UCyU0mNYdX9EHY7rc5yucIZA u know the pick bit is that only for Typscript or can it be done using just JavaScript
Sorry I missed your comment =(
Yes, in Typescript you quite a few nice helpers - I use Omit and Pick quite a lot =D
Hello bruno , just a suggestion. Add the video playlist link to every video description ideally on the very top.
Will probably also help with getting some more views . Greetings
Thank you very very very much for the suggestion Medy 😍😍
I'm really new to this youtube thing - Please, if you have more suggestions let me know. Tonight I'll update all the videos to have pointers to the playlist they belong to 😊😊
@@BrunoAntunesPTure welcome.
btw your diagrams are aweseome ;) to exlain the concepts.
I can totally see your experience shining through making it easy for you explaining complex topics in a simple way.
If you enjoy them. Maybe target some even more beginner topics with potential bigger reach... just a thought
You could also split up some videos ... to have less intimidating video length ... 10 - 20 minutes ... though I feel like.. once more ppl know you this wont be an issue
I clicked anyways^^ ...
Authentication is currently nagging me abit.
Im still lacking a broader view what to choose for authentication... it seems like any of that stuff has its flaws ...
Im very interstied in this because I care about having at least basic security for when I built some stuff....
. so as a beginner I would like to have " autetnication that isnt too hard to implement but for the most part safe"
I found some basic aproaches here.
But I still wonder if one should bother when there are options like firebase or strapi...
In case you actually start building a real project. What would you pick for a small project .. and breath somewhat easy knowing that the next guy who just knows a tad about authentication cant crack open your system xD ? !
So in a sense I want smth where you can say "this should be somewhat safe"... for my first projects xD
Anyway Im excited to see more.
Greetings
All your tips are amazing my friend!!! Thank you very very much, you are amazing ♥️
Regarding authentication, in order to be easy, probably the best bet is to use passport with Facebook /Google/twitter autentication when possible. I have to prepare a video like that in the future. I think it will help people to have a secure and easy authentication system 😍😍😍
Once again you are amazing my friend, thank you, thank you ♥️♥️
@@BrunoAntunesPT Nah man you are amazing :D...
My advice may not help much:D ... But mabye worth a try.
A video to demontrate " what is a basic -/ secure" authetnication ... would be great.
I mean for starters anything that works is fine .... but I have that little voice that is asking "but what if you app grows even a little " can I trust my own authentication or should I better trust google or firebase xD ...
Greetings
Sorry Medy, for some reason I lost your comment =(
Honestly lately I have been working quite a lot with auth providers like Facebook and Google. Looking into my analytics, I'm really really really tempted to completely remove my custom authentication system (almost nobody is creating accounts with email+password). I'll do some more analysis on this =D
This is awesome, keep up the good work!!!
Thank you Raja 😀
This is really awesome man!
Thank you so much for this, really helped me a lot!!
Amazing 😀😀😀 thank you for the feedback my friend 😍
Great .. please provide more project like this.Thank you
Thank you!! 😊
I will bring more content like this in the future 😎😎
hey bro, thanck you very much, amazing work
Thank you 😍😍
Great tutorial. Learned lot. Thank you so much Bruno..
Thank you very much my friend 😍😍
Loved this tutorial. Can you show us how to introduce options between two textfields? Where the user can choose either a specific textfield or they can choose the other textfields to fill.
Thank you my friend =)
I don't know if I fully understood your example. If you can give me a practical example, probably it will be easier for me to understand =)
@@BrunoAntunesPT imagine if there's a website which allows us to POST books. Imagine if we're trying to write a book from scratch. We have to give it a title for the first time. And then move on. But if we've already written somepart and then we're returning later on, so now we have to choose from the available books (so that we can carry on from where we left of) I hope I didn't make this more confusing 😅
I think I got even more confused now 😅😅😅 probably because it's weekend and my brain is lazy 😂😂
Do you have any application doing that? If you can send me the url I think it will be the easiest way for my lazy brain to understand it 😅😅
@@BrunoAntunesPT okay so imagine if there's an option to either choose from an available list or add a new one to the list. The user can choose only one option. The one he chooses will change the state
Ahh you want some fields validating some other fields, cross-field validation?
Can you just watch the first 35 seconds of this video to let me know if this is what you want? ua-cam.com/video/kYyaJyTLjpk/v-deo.html
This was incredibly helpful. Thank you so much.
Thank you 😍
Wow, that was exactly I was looking for, explanations were perfect. I need one suggestion is that how can I transform into jsx? I am new in react. :D
Thank you my friend 😍😍
Yes, it's very possible to have just JavaScript without any TypeScript for this example!
I created this codesandbox in pure JavaScript: codesandbox.io/s/dry-architecture-kfmd7?file=/src/pages/index.js
Let me know if that is what you were looking for 😃😃
If you are learning and you don't mind, I'll give you a tip 😃
When you see any typescript code that you don't know how to convert into JavaScript, you can put it over here: tsplay.dev/oN5A9N
One the left you can see my typescript code (from this video), on the right, the "converted" JavaScript code 😃
@@BrunoAntunesPT Thanks a lot, much appreciated!! Can we validate the forms on each step ? Will breaking forms into for multiple step help?
@@BrunoAntunesPT Will surely keep this in mind!! Thanks a lot!!
Are you asking about having different components for each step?
If that's the question, absolutely, it will make the code much easier to read 😀
Regarding the validation we have validation per step. You can also have global validation but having it per step seems easier to read for me 😅
Sorry if I misunderstood your question 😅😅😅
thank you very much brother!!
Thank you 🤗
Cool video what keyboard do you use? it sounds so nice :D
This one was recorded directly on my Dell XPS 15 laptop, no external keyboard 🙂
Thank you Bruno, this video helped me so much. Thank You
I'm very happy it was helpful 😀😀 thank you my friend 😍😍
Superb tutorial Sir! 👏
Thank you soo much Kapeesh 😀😀❤️
Superb!
Thank you 😍
ahhh Bruno, Bruno :) thank you
Thanks Bruno! Amazing tutorial! I am just having an issue, that after the first step Formik sets all fields to touched, so if I have a few fields in the second step as soon as I write in one of them all the validations show up on the other fields, I assume since they are all touched. Any solution? thanks.
Thank you very much =D
Yes, did you check my repository?
I did a commit at the time in the repository to fix that small issue that I missed while recording.
The specific commit is this one: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/c7924e8b7d80d24f7aa227cae1c52f554ff503a5
Let me know if it fixes your issue :)
@@BrunoAntunesPT Thanks! I didn't know you could use setTouched with an empty object to reset. I ended up using resetForm with the old values, but this is much better. Really appreciate your quick reply. subscribed!
Thank you my friend 😀
I appreciate your tutorial
Thank you 😀
Hey Bruno, loved the video! Any chance a license (e.g. MIT) can be added to the github repo because I want to be respectful of your code and would like to use it for one of my projects! Thanks :)
Thank you very much Yousef!!!
Yes, of course!!! All my code is public and you can do what you want with it =D
I added a License.MD (MIT) to my 2 last repositories =D
If you want I can add it to any other repository =)
Bruno Antunes Thank you so much Bruno!!! I also just subbed 👍🏼
Double thank you, Yousef 😍😍
thank you!
Thank you, it was a very beautiful explanation
Thank you 🥳🙂
Thank you! This was a rare video with grateful informations. I just have a question that how we use formik props like 'setFieldValue' or 'values' on parent. Forgive me for this question, since I am junior.
I figured a way out but I didn't test it fully
Wrapping FormikStep with FormikPropsProvider and passing props as function may work
{(props)=> 'child components field etc'}
{
return React.createElement(
FormikProvider,
{
value: formik,
},
children(formik)
);
});
Thank you very much :D Sorry for the delay replying! I'm very happy you found a solution =D
Great tutorial! THANKS!
I'm glad you enjoyed it! =D
Obrigado, Bruno. Entendi perfeitamente. Abraços do Brasil.
Muito obrigado Bruno 😁😁😁
Um grande abraço deste Bruno Português 😄😄
@@BrunoAntunesPT Sua explicação é realmente maravilhosa, parabéns pelo trabalho !
Muito obrigado Arthur 😀😍😍
Good job! Nice video!
Thank you very much Filip 😀😀
Hey, Bruno, thanks for the awesome video!!! I have a question. Can I pass the 'touched' and 'errors' props into ? I wish to define classNames in depend on 'touched' property, and then highlight the fields with errors.
Thank you 😀
Formik provides a hook called useFormikContext 😀
I think that's all you need inside your formik step plus a render prop on the children of the formik step 😊
@@BrunoAntunesPT thanks!
If you have this class on udemy, I will definitely give u 5 stars.
Thank you Justin 😀
Actually I have never used udemy xD
pure gold, thx!
Manuel 😍😍 Thank you 😀😀
Very usefull as always. Thanks.
Thank you Luciano ❤️❤️
again well explained tutorial
Thank you very much 😍😍
Thanks so much! The code is so nice and clean 🙏
Hello Bruno, nice tuto. Thanks a lot. I would love to do the same in react or nextjs with tailwind css.
Thank you 😀😀 that video might happen one day 😜😜
But to be 100% transparent with you I dont have it planned for short term 😊
Hey Bruno! Awesome tutorial, as always.
I have one question:
validationSchema={currentChild.props.validationSchema}
is what you have written.
currentChild has been typed like this: const currentChild = childrenArray[step] as React.ElementType;
and FormikStepProps give access to the following properties:
export interface FormikStepProps extends Pick {
}
So, my IDE complains on the first line of code I've written in this answer ( the validationSchema= ...) TS2339: Property 'props' does not exist on type 'ElementType'. Property 'props' does not exist on type '"symbol"'
I really like the "Pick" variant, coz it helps other developers instantly knowing what they can access. So is there a way to keep it even when accessing props like this? Adding props to Pick defeats its whole purpose
Thank you my friend 😀😀
I don't get any warning/error using vscode. Which editor/ide are you using?
BTW executing "npm run build" do you get any error/warning? That is the "source of truth" 😊
@@BrunoAntunesPT build fails because of this.
I made a public repo for you to check it out: github.com/Leviathan91/Examples/tree/master/formik/formik-multistep
I am using IntellIJ IDEA, because of the the java background / android programming I'd really like to keep it :)
I don't have access to a laptop right now, but looking into your code and mine you are using ElementType in the first 4 lines of FormikStepper and I'm using ReactElement.
I'm almost sure if you change it to ReactElement instead of ElementType you'll solve the issue 😀
Let me know if it worked out my friend 😍
Hi Bruno! Great video, as usual!!
I leave a request in case you need ideas: how to handle user authentication in the server side in order to avoid flickering.
I currently use getserversideprops for each route that I want to "protect", but maybe you know of a better way :)
Thank you =D
What do you mean by flickering? Flickering between you going to the login page and other pages? Or between normal pages?
Sorry, I'm probably missing something :)
@@BrunoAntunesPT Hi Bruno! Thanks for replying!!
I'll try to explain myself better: if we have the "/signin" route and I am already signed in, If I don't use the getServerSideProps to know if the user is already logged in, the server will render the signin form, and when the client loads it will redirect or show something else like "you are already logged in", thus provoking the flickering.
This would happen in all the user protected routes. Then the question is what would the better aproach/pattern to solve this problem about the logged in user.
Thank you again for the answer and for all the videos, they are top-notch material!!!
If you don't do anything server side (getServerSideProps or getInitialProps) and navigate to /signin you'll be shown that page.
A few (milli)seconds later your javascript finishes downloading, parsing and runs....
if you are not logged on nothing happens, but if you are already logged in it shows that message, hence you seeing the flickering. You saw signin page and now the new message.
If you rely only on javascript client side you'll have that 😊
This component is really awesome, but i has a problem. I need to access formik context for a depend select combos. For example, i have 3 levels, country, state and city, in each level i need to access my api to fill select combos. I dont know how to use handlechange (i am try handleblur) and i dont know how to use formik context to access country and state for fetch list of cities. Any help please.
Thank you very much =D
You are lucky today =D I already have a branch on that repository using the formik context, to show a full name on other step :)
That branch is here: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/blob/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c/src/pages/index.tsx#L167
"The magic" happens in the last 10 lines of that file :)
@@BrunoAntunesPT Really thank you very much. He didn't expect you to respond so quickly. Very thankful!!!
I'm happy I could help 😍😍
How we download pdf in same form
Thank you Bruno! This was a great tutorial.
One thing though, when I go to type in the first name field, I get the following warning in the console:
Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.
Any idea what could be causing it?
Thank you Steve =D
Usually what you are seeing is because you are setting the initialValues with undefined (or null).
For example: will trigger the warning you are talking about. If you have you shouldn't see any warning/error.
If you clone directly my repository, for example using codesandbox, you'll not get the warning :) ==> githubbox.com/bmvantunes/youtube-2020-june-multi-step-form-formik
Let me know if this fixed it, otherwise it can be something else (if you can share the code you are doing, that will help as well) =D
@@BrunoAntunesPT My initialValues looks exactly the same as yours 🤷🏾♂️
I've put my code in a gist here: gist.github.com/Steve-Reid/9d3481e0c8b591a8065567e7448e51d8
Thanks for your help 👍🏾
I think I spot the error =D
On line 41 where you have:
name="firstname"
change it to be:
name="firstName"
in the initialValues you have "firstName" (capitalized N) and in line 41 "firstname" (without N being capitalized) =)
Give it a try and let me know if the error is gone =D
@@BrunoAntunesPT Yep! That fixed it! You are the man! 🎉
Hello Bruno, What is your opinion about react hook form ? I find it more satisfying, if you think its great tool and if it is convenient could you make one video on it ?
I think they are really great libraries to work with forms.
Currently I prefer to use formik, mainly because I'm used to it - this can change in a few months as I get more familiar with react hook form 😀
This also means you can probably expect a video about it in the next 2/3 months as/if my opinion changes 😀
Very helpful tutorial Bruno, thanks a million. I have a quick question, please can you share how to use useFormikContext to pass the touched and errors value to the FormikStep and how to access it in FormikStep. Thanks once again.
bruno you are really amazing
You are also amazing my friend ❤️❤️
Great tutorial! However, how can i validate each step using server-side validation? For example, when i enter the email on the first step and i want to check if it already exists on the database.
Thank you 😍
You can have async validators with yup. Let me copy one of their documentation examples:
// or make it async by returning a promise
let asyncJimmySchema = string().test(
'is-jimmy',
'${path} is not Jimmy',
async (value, testContext) => (await fetch('/is-jimmy/' + value)).responseText === 'true',
});
Hi Bruno, amazing video! Is it possibly to make it so that pressing the browser back button does the same as the back button on the form (if we somehow make steps have different URLs)? Or I can only show the users a popup so they confirm that they want to leave?
Thank you 😍
Yes, it's possible, you would would have to "connect" with your router system, which is a bit annoying, but possible 😊
@@BrunoAntunesPT Thanks for the fast answer! Could you please lead me into the right direction with next router?
I would do the following:
1 - create a page: src/pages/my-page/[stepNumber].tsx
2 - take advantage of shallow routing - nextjs.org/docs/routing/shallow-routing
3 - every time you change step do something like router.push("/my-page/3", undefined, {shallow:true});
I did an example using shallow in the car trader app video 4 that might be useful to understand the concept. Video playlist: ua-cam.com/play/PLYSZyzpwBEWTt-0uuxAcSrJmMlnD9Yuz3.html
@@BrunoAntunesPT Thank you soo much!
Pelo nome o cara deve ser Português, cara você acabou de me ajudar muito.... Valeu......
Sou Português ❤️ muito obrigado Eládio 😊
Hi Bruno, I am back here, I followed your NextJS tutorial last time ;) thank you. I am wondering if maybe it is feasible to have a table with search bars and filtering in one of the step ? or is it only for small forms ? thanks
Thank you Marie 😀😀
I don't see any performance problem with that approach as long as you have filtering and pagination server side 😊😊
@@BrunoAntunesPT thank you !! yep I do. Thank you so much for your quick response :) last time you really helped us with next, my team and I scored a good grade at our coursework !! thank youuuu
That's awesome 😀😀 I'm very happy you all were able to score a nice grade 😍😍
Thank you soooo sooo much for letting me know that experience, it really makes me feel happy 😀
@@BrunoAntunesPT :) One more question, sorry to spam you with question but I was wondering can I use Javascript instead of typescript ?
No worries 😀
Yes, you can use JavaScript, even though I would recommend TypeScript 😀😀😀
If you want to see this video's code in JavaScript, please check this: tsplay.dev/oN5A9N
PS - You can put any typescript code there, and it "gives" you the javascript code. I hope this helps 😀
You are amazing my friend, this was really really helpful!
I wanted to ask you if it is possible to add a custom onClick() listener to a formik field without overriding the default formik one?
can I ask why you want to add an onclick? 🙂 Usually there are better ways than using onClick
That being said, Formik doesn't use onclick. They use value, onchange, onblur etc, but no onclick 🙂
So if you add an onclick you should be good 🙂
@@BrunoAntunesPT I need to show a select component only when I click on a specific radio button and I thought if add an onclick function on the radio button that toggles the values of a certain state hook I can achieve that, you think there's an easier way?
I had almost a book written here in the comments trying to explain why using an onclick in that scenario would be a bad idea, but then I decided to delete my gigantic comment and create a demo for you without the onclick =D
The demo also does sanitization, meaning if you select an option in the dropdown and then select another option in the radio button, after you submit you end up with a value WITHOUT the dropdown value (if you don't like that, just delete the if inside the onSubmit). I think I put every single detail in this codesandbox and in the end it was faster than my "book" and hopefully gives you much more value than my "book" xD
codesandbox.io/s/elated-shape-m681g?file=/src/App.js
@@BrunoAntunesPT You are amazing my friend, this was very very helpful, thanks
Happy I could help 🙂
Hi Bruno, I heard in your videos that jss will be dismissed from material-ui for styling the pages. I understood that the jss will be replaced bt emotions ??? I'm not sure about what you said. Do you confirm that jss will be replaced by emotions ?? Thanks in advance
Yes, by emotion 😊
You can check the following two issues:
github.com/mui-org/material-ui/issues/24405
And
github.com/mui-org/material-ui/issues/22342
Hi. Will there be a video about NextJs with state manager? React Context or Redux? That would be great.
Redux I'm no longer using it, so most probably there won't be a video about something I no longer recommend 😊
Regarding context we might do one sooner or later 😉
Hi! how are you?
if you have a error when you submitting form and need back one step for modify one input, how to manage errors in this case? In my case, formik, show errors in inputs when back one step because formik change the values. I need help
How can I add Mui Autocomplete in this Multi-Step Form?
Very nice!
Thank you Benedikt 😊
Olá Bruno Antunes, tenho uma dúvida e gostaria que você me ajudasse;
Como eu faço para acessar as props do formik como isSubmitting, values, setFieldValue dentro dos formikSteps? Eu sou iniciante, e preciso construir um form e não estou sabendo como.
I have follow you code but not working FormikConfi and FormikValues
This is very useful, can you please tell how can we use form values from steps ? For example, how first and last name from Form Fields can be used to show formatted Full Name in same form ?
Regards.
Thank you my friend =D
I ended up coding one possible solution at github.com/bmvantunes/youtube-2020-june-multi-step-form-formik/commit/940d2564ecf7ad60ed3dc497877bd2804c7c9b6c
Let me know if this is helpful - It shows on step 2 and 3 the message "Hello, {firstName} {lastName}!" =)
PS - You have at least 2 other possible ways to implement this that will be cleaner in the long run, but this one is probably the simplest if you intend to use it only once or twice :)
Hello, thanks for this tutorial
Please what are the dependencies required? Thanks
The GitHub URL is in the video description 🙂
Is there a reason you are using component={TextField} instead of as={TextField} in this video?
That's because we are using formik-material-ui 😃
You can have a look into their documentation here: stackworx.github.io/formik-material-ui/docs/guide/getting-started
Great video
Thank you, glad you enjoyed it 😊
thank you so much! I think i miss the source code, the one in github is typescript and in next.js?
Thank you 😊
At the end of each video I commit the code as is to github without any change 😊
In the video description I always have the link to the repository, in this case from the video description:
Github Repository: github.com/bmvantunes/youtube-2020-june-multi-step-form-formik
I hope you find the code helpful/useful 😊
And yes the source code is in typescript 😊
i think the techlead should see your form lol, hahaha
Why? 😊
awesome. Would you be able to show how to build a form with multiple sections (i.e a scrollable form)
Thank you 😍
Do you have any example of an application with those scrollable forms? I think I'm not familiar with that ux concept 😊
@@BrunoAntunesPT here is an example: assets.littlerealestate.com.au/documents/NSW-Full-Tenancy-Application-Form-January-2017.pdf?mtime=20170130165210
You want to be able to print it to a PDF and have one section per page? Sorry I'm a very confused right now 😅
If you want to build the different sections on a page and allow them to grow as you add more, then you don't need to do anything, meaning no special code on your side for that to happen 😊
@@BrunoAntunesPT to keep it simple, how to achieve the layout in page 2 of the pdf (Primary Contact) in Formik, which should be responsive. If we could push the form data to mongodb, that would be super cool.
The layout is all css, zero to do with formik or any form library 😊
I have a problem when I go back to a previous step , I lost the values that I made (only with checkbox field and autocomplete field)
Without seeing your code I don't know what you are doing wrong 🙂 can you share your code? - for example a GitHub repository or a codesandbox 🙂
Please continue on youtube, I hope everything is alright. Did not saw you from a very long time Bruno?
Hi Bruno. Thanks for the great video. I'm making a very similar project so I stumbled upon it and it really helped me. :) I was wondering if you could help with perhaps another video showing how to implement the formik-material-ui Lab Autocomplete component. I've got it implemented in my project and it is working visually, but i can't figure out how to make it update the formik values or maintain it's value in the UI as I navigate back and forth between page steps. Thanks!
Thank you Sam 😍
Thank you also for the suggestion I'll keep it in mind for future videos 😁😁
Great video as always. I have one question, the validation on each step is great and working fine for UI side but how to deal with serverside validation which doesn't care about steps and only cares about whole form. For example, you submit to the server and it gives you error on field email as "Email already exists", and email field is in first step of our multi step form, how to locate to exactly that email field when there's an error from server side?
Thank you my friend 😊
In those cases I think async validation will help you for the email example 😊
In case you don't want to use it, you have two options. Keep a map of what field is in what step and when you get errors go to that step (or the step of the first error)
Some apps I also saw expanding all the steps into one when that happens, even tho, I don't love that 😅😅