Nice video Bruno 👍👍 The combination between Formik + Yup is amazing. It makes validation feels like a breeze, while MaterialUI showing the errors in the UI.
Bruno, i don't have words to thank you enough! You helped me so much with this video alongside with the mult step form. Greeting from Brazil, muito obrigado!
Love that you're doing these in Typescript, it makes it so much easier to use in actual projects! 💙 Any chance of you making a tutorial on how to add custom validation methods/types to yup? For example date validation and credit card validation? Particularly how to make them "visible" to Typescript, so you can do value: string().required().creditCard() 🙏
Thank you mate 😍😍 yeah I prefer to explain in typescript because that's what most people will use at work 😀 at least here in London 😊 Yeah... I can do that video one day explaining how to add custom validators to yup using typescript 😊
I think TH-cam deleted 3 comments from you 😔 I received 4 notifications but only see one comment 😔😔😔 Regarding your question on this comment, you can put the state on react context 😀 if you have the luxury to have your component inside the form itself, then you just need to call that useFormikVontext hook 🙂 if you have a repository I can look at, I can give you much more accurate recommendations based on your needs 😍
@@BrunoAntunesPT Hi Bruno, whenever I post a link for my repository in the comments it gets deleted directly, my code basically looks exactly like the code you used for the FormikStepper and Multi-form, what I just need is to access the values of the form inside the FormikStep, I'm sorry I tried posting a link for my code here but it wouldn't work. (Ps: if possible I will need the solution without typescript) Thanks a million times king
Yep, TH-cam for the last few weeks has been very "aggressive" blocking comments with external URLs :( Feel free to share the Link with me on Linkedin, because having a repository to work on, makes life a million times easier for me :)
Hi Bruno, Is there a way to show a text field based on validation of another field. For ex: if a text field which takes amount crosses certain limit, i need to show a text area for the reason. Any help would be grateful, thanks in advance
I have exactly what you need in this video between a checkbox and a textfield 😉 th-cam.com/video/l3NEC4McW3g/w-d-xo.html Then the only thing missing is a ternary for the hide and show of the amount of money text field: {erros.amount? : null} 😊😊 Let me know if that answers your question 😀😀
I'm soo happy reading your comment Rafal 😀😀😍😍😍 It was to help people that I created this channel, so your comment makes me feel fulfilled 😍 Thank you for your words Rafal 😀
So genuine feedback, I try your methods from two of your videos and I always run into errors I have no idea how to solves, turns out you are using typescript, I don't think most of your audience will be using typescript. May want to consider that. Gave you a thumbs up though.
Thank you for the feedback and the thumbs up my friend. I understand your point, completely! :) The thing is that where I live (London, UK) most companies nowadays have typescript as one of their requirements. That's the reason I use typescript on my videos to help people over here :) What errors are you getting on this video (or previous videos) because it's in typescript? I can help you convert it into JavaScript :) PS - You can drop the TypeScript in this playground and on the right side you'll get JavaScript: tsplay.dev/oN5A9N
Thank you very much for your words 😍 I'll try to soonish make a video about multi file uploads, not sure if it's something people want to see. What do you think? 😀
Awesome I will prepare a multi file upload then 😀😀 Well I didn't just desert that series I deserted TH-cam completely for like 2 months. Slowly, as things improve in my life I will come back to TH-cam progressively 😊😊 this video is part of that react series, one of the last planned videos there 😊 one day I need to do more videos there for initial topics tho 😊
Hii Bruno, have been watching your tutorials for quite some time now and I love the way you explain and make it so easy. I followed along with your formik multi-step and field-array tutorials and they worked great. However, when I'm trying to combine both in one of my projects it's throwing errors. Now, I understand what's wrong with the code but do not know how to solve it. In the field-array project we can destructure {values, errors, isSubmitting} before starting the component. But what do we need to do when we have to implement field-array in a multi-step form ?
Right below the FieldArray opening tag we pass arrayhelpers ex:- {push, remove} . Along with these we also need to pass form prop so now, it will become {push, remove, form} and then use {form.values.fieldname.map()} etc inside the fieldarray and it will work.
Hello Bruno, nice work man!, I'm currently watching your next js series. I have a question for you, do you feel like switching to React Hook Forms? I was using Formik in a really long 12 step form (60+ fields) and it was really really slow. I tried to optimize with FastField but I found that FastField was not working. Have you faced this kind of problem with Formik?
Thank you Julio 😍 I'll be 100% honest with you. The main reason I don't change to react-hook-form is mainly because of their breaking changes from release to release which are quite hard to apply in applications with thousands of components 😅😅 This one is only a few days old: react-hook-form.com/migrate-v6-to-v7/ If your application is small, that is not a big deal, but when you have multiple applications built by 20/30 people, coding everyday for the last 2/3 years, those called "small breaking changes" become a bit harder to manage... not impossible by any means, but annoying 😅😅 Don't get me wrong, react-hoook-form is amazing, but Formik has never failed me in very important applications. Also it has been without breaking changes "since forever", so for the applications that make me money, I prefer to keep them on Formik for my peace of mind and as I said before, it has never failed me on important moments 😃 I have a few applications on react-hook-form, but...for some reason my brain still feels more comfortable and easier with Formik --- time may change my thinking tho, but for now that's how I feel 😅 PS - Regarding having 60 fields in a form, I think my Designers/UX would "kill me" even before I notice any performance problem 😂😂
@@BrunoAntunesPT thanks a lot for your answer! It helps a lot and I'll take your approach on this. Thanks man. And yes, it was 60+fields (many of them could be added dynamically). Sometimes client is a bit too much persistent 😅. But it's ok now, that project ended up well and I'm looking forward to Next js
I already promised in the comments to other people, if I ever start to feel better while using react hook form, I'll make a tutorial about it. BUT I'll not do a tutorial about it while I don't move my main apps migrated into it 😅 basically if I don't use it where I make money (my main apps), I'll not create a tutorial just for the views that it could bring to the channel 😊
Hello Bruno! Great tutorial as always! I played around with adding lots of donation elements and when I start typing in the institution or donation amounts it starts to lag and get a bit slow during development. I can imagine for a larger application with many more fields and field arrays it will be very laggy. Have you experienced this before?
Thank you =D Well... Formik is known to be a bit slow when you have many Fields on the screen (sadly). They have an optimization called FastField: formik.org/docs/api/fastfield From their docs: is an optimized version of meant to be used on large forms (~30+ fields) or when a field has very expensive validation requirements. has the same exact API as , but implements shouldComponentUpdate() internally to block all additional re-renders unless there are direct updates to the 's relevant parts/slice of Formik state. I have one of my applications that needed lots of fields using react-hook-form, but I honestly prefer the formik API, so I'm debating with myself for like 1 year if I should move to react-hook-form or not xD
If you have 10 or 20 fields, for your users is not noticeable. If you have 20 or 30 fields, depending on their device power you might start to notice some difference 🙂 In the react hook form docs page they have a comparison with formik and the re-renders from each library 🙂
Your videos are always so informative.I have 2 questions, first :how can I show error message if user leave the array empty ? second question : how can I created one big form contains subform which contains save button , how can I handle this . Thank you.
Thank you =D We are already showing an error message when the user leaves the array empty. If you delete the current donation I show the message "You need to provide at least 1 institution" :) You can check the codesandbox for this video here: codesandbox.io/s/goofy-volhard-yru1w?file=/src/pages/index.tsx Let me know if that helped :)
Olá Bruno, muito bom o contúdo, parabéns e obrigado Eu tenho um cenário, onde por exemplo, as doações não podem ser repetidas e eu preciso apontar qual campo está repetido... daria pra fazer isso? como faria? Abs.
Does anybody else have a problem with/solution to a TS error concerning the yup test method? "Argument of type '(donations: Array) => true | ValidationError' is not assignable to parameter of type 'TestOptions'. Property 'test' is missing in type '(donations: Array) => true | ValidationError' but required in type 'TestOptions'". Thank you! And Bruno, you've got a talent, you can teach very well. :)
Thank you very much Dan, I really appreciate it 😀😀😍 I cloned my repository and I don't see any warnings on "npm run build". Can you share your code to see that typescript error/warning? 😀 PS - In doubt, I also updated all the npm dependencies (just to double check), but I still don't see any error when I build. My GitHub repository in case you want to check - github.com/bmvantunes/youtube-2021-jan-field-array-formik
@@BrunoAntunesPT I updated the deps according to your repo, restarted the TS server, restarted the project and the error is a bit different now, but still is there nonetheless. And the code is exactly the same as in your repo, I copied yours to try and see where the error is. "....test((donations: Array) => {..." "No overload matches this call. Overload 1 of 4, '(options: TestConfig): OptionalArraySchema', gave the following error. Argument of type '(donations: Array) => true | ValidationError' is not assignable to parameter of type 'TestConfig'. Property 'test' is missing in type '(donations: Array) => true | ValidationError' but required in type 'TestConfig'. Overload 2 of 4, '(test: TestFunction): OptionalArraySchema', gave the following error. Argument of type '(donations: Array) => true | ValidationError' is not assignable to parameter of type 'TestFunction'. Types of parameters 'donations' and 'value' are incompatible. Type 'TypeOfShape[] | undefined' is not assignable to type '{ percentage: number; }[]'. Type 'undefined' is not assignable to type '{ percentage: number; }[]'" The only difference between our projects are that I don't use next and have more packages included.
@@BrunoAntunesPT I put it to a codesandbox here codesandbox.io/s/loving-breeze-kc95i?file=/src/FieldArrayDemo.tsx The TS error looks exactly the same. Thanks for your help. :)
With code it's always easier 😀 Fixed: codesandbox.io/s/suspicious-kowalevski-fr9o4?file=/src/FieldArrayDemo.tsx Basically you are using strict:true (which is good) and next by default uses strict:false. Now the code is fixed to work with strict:true even on my repository: github.com/bmvantunes/youtube-2021-jan-field-array-formik/commit/ab924f3f5ab7b0c68a6c938b91dca713829a2b05 Thanks for this 😀
Great tutorial but I have a problem same as that, about updating the data. Like the user is going to update the stored data and he/she wants to add/delete a the dynamic form? Thank you in advance for your advice
Sorry, but I don't understand what you want to achieve 😊 Do you want do delete all the fields? If that's the question, you can delete them all by clicking on delete until there are no fields left on the screen - but probably this is not what you asked 😔
😅 Sorry for not elaborating properly. What I mean is like when creating CRUD with the same kind of approach based on your tutorial. How can a user update the data using that form because I'm kind of using your approach to one of my projects, but unfortunately, I'm having a hard time, dealing with UPDATE like updating the data that has been created with those dynamic fields. How can I update my data in the dynamic fields to add more or delete one. I hope you understand the explanation 😅 I'm not that good in elaborating.
On the UI or in your database? If it's on UI, formik has a property to reinitialize the properties based on the initialValues changing: formik.org/docs/api/formik#enablereinitialize-boolean
I have a doubt, what if I delete (click on delete) after refresh, so there won't be any field left right, to get the page to normal we will have to refresh and that won't be a good practice right. Kindly help me with that. Apart from that, the video is very very informative and I found it just in time as I needed this thing for my college project. Thank you so much!!!
Thank you very much for your kind words 😊 We have a button to "delete" each row and another one to "add donation" globally at the bottom, so no need to refresh the page 😊 The "add donations" is always visible, so at any point in time you can add one more donation, even if you have none on the screen 😉
I'm migrating a very large application to material UI 5 (from material 4). When that migration is over I'll do a video showing all the pain points I faced (or at least the most common ones 😅)
great! anyway, do you have idea how to insert the values into sql database? i'm using node js and async await but doesn't work well. only the first values are inserted to database row
That's exactly what we did in this video. We have an array of objects with 2 properties (institution and percentage ). The only difference is that we don't use a typeahead, but that is a visual component, formik doesn't care if it's typeahead or not 🙂
I need to notify youtube that why i get notification a week later!! I just refactored a lot of code yesterday moving from react-hook-form and yup to formik, formik-material-ui and yup. I was really finding difficult to register form elements from mui dialog, spent 2-3 days trying to figure out. In one day refactored all my code to formik, formik-material-ui and yup, and it was a breezer. Did you ever try React-hook-form? They claim a lot about number of renders, which i also saw while console.log. What is your opinion?
Yeah TH-cam notifications sometimes are a bit weird 😅😅😅 I have tried react form hook in the past and I like the idea and everything. But for some reason (probably because I'm used to it) I still prefer formik for complex form structures 😊 In the end we should use what we feel gives us the best developer experience without sacrificing performance ❤️
@@BrunoAntunesPT My friend after all refactoring I'm really struggling with just one thing. I'm using Select from formik-material-ui and want to have outlined. Not able to get the style correct at all. :( Pls help. codesandbox.io/s/falling-sound-u8ftf?file=/src/App.js
Hi Bruno, Can we add validations for dynamically added fields. Like, if i get fields that needs to be validated from API, can we add them to schema on runtime? Thanks in advance
The validationSchema is a prop like any other 😊 you can change it at runtime without any problem Regarding validating fields with an api call you can check the async validation section here: formik.org/docs/guides/validation Let me know if that helped 😊
@@BrunoAntunesPT Thanks bruno. Can we get validation fields and validations over the api. Is that possible? Like a name field has "Required" , "min-length","max-length" etc over the api
Yes, it's possible both ways 😊 You can receive the type of validation (required, etc) and create the validation schema based on that OR You can validate directly in the api via the method I sent in the previous comment 😊
In reality you can send any API body you want, what matters is what you return from the validate function 😊 Open this URL and go to the section called "// Async Validation" - formik.org/docs/guides/validation and you'll see something like this: ``` // Async Validation const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); const validate = (values, props /* only available when using withFormik */) => { return sleep(2000).then(() => { const errors = {}; if (['admin', 'null', 'god'].includes(values.username)) { errors.username = 'Nice try'; } // ... return errors; }); }; ``` As we can see in that example, you need to send an object with key/value pairs. The key is the name of your field that failed validation, the value can be a string, for example. For example, if you want to fail the field "age" and "country" you can return on validate something like { age: "You need to be at least 18 years old", country: "Your country is not acccepted" } If you send an object like that in your validate function, formik will mark those 2 fields as "errors"/"failed validation". I hope this helps 😀
Hi Bruno, some time is gone, when we had chated. I've already found a job for junior position, I want to wish all world's goods for your soul, you are the one who was staying with me while I was going to this moment :) What about ant design, it would be great if you showed good practice with its form items, controlling, tables and etc. Material also cool, but with estimation on tasks at the job don't have enough time for practicing, after job I'm watching videos about indonesian islands and choosing on which island i want to go in nearest future😅😂
Congratulations my friend 🎉🎉🎉 I'm very very happy for you, I'm sure you'll do very well on your new adventure 😀😀 please keep me posted ❤️❤️ Regarding Ant, I used it for a while, but I still prefer to use material and for some apps tailwind 😅😅
Hi, Do you Have any Course on React with Typescript??? As Typescript is growing more and more day by day, Each and every Company Asking REACT with Typescript Combination.. Can you please Release and End to end Course on React, Redux with Typescript please..
I have a light introduction to typescript that you might find useful: th-cam.com/video/0cXccUew19k/w-d-xo.html I might in the future make a deeper video taking that video as a starting point 😊
For the switch you have stackworx.github.io/formik-material-ui/docs/api/material-ui#switch For the select stackworx.github.io/formik-material-ui/docs/api/material-ui#select Let me know if that's what you were looking for 🙂
Hi, if anyone can help me with this.. gotta make a SinglePageApplication, a simple sign up form, the screens required are: step 1 - asking for users name and phone number step 2 - asking for users email and data of births step 3 - should present all the users details for confirmation step 4 - sign up completion screen not sure how to solve the transition from 1st to 2nd step. also, if I have to use session or local storage to present users details on step 3..
I love c#, but at this stage I'm a bit away from it - I might come back one day 😊 PS - To be absolutely honest with you I'm still missing my good old entity framework, an amazing orm with great migrations 😀😀😀
I'm very happy you missed me 😅😅❤️❤️ and sorry for the lack of videos, I know I was a month away. The truth is that since lockdowns started in London it has been very hard for me to conciliate TH-cam with my family and work... Hopefully I'll learn how to do that soon ❤️❤️
I like your kindness and politeness.
Thank you very much for your kind words ❤️
Nice video Bruno 👍👍
The combination between Formik + Yup is amazing.
It makes validation feels like a breeze, while MaterialUI showing the errors in the UI.
Thank you 😀😀
I really love the combination of those 3 😍😍
Hey bruno. Glad you are back online.
This video is a must watch!.
will do it soon hopefully!
Awesome Sergio 😀
Let me know your opinion after you watch it 😉😉
Bruno, i don't have words to thank you enough! You helped me so much with this video alongside with the mult step form. Greeting from Brazil, muito obrigado!
Muito obrigado meu irmão 😍 fico muito feliz dos meus vídeos estarem a ajudar 😀😀
So glad I stumbled across this tutorial. Exactly what I needed, and as mentioned already, nice to see you using Typescript
From your introduction, you just saved my day. Thanks Bruno
Love that you're doing these in Typescript, it makes it so much easier to use in actual projects! 💙
Any chance of you making a tutorial on how to add custom validation methods/types to yup? For example date validation and credit card validation? Particularly how to make them "visible" to Typescript, so you can do value: string().required().creditCard() 🙏
Thank you mate 😍😍 yeah I prefer to explain in typescript because that's what most people will use at work 😀 at least here in London 😊
Yeah... I can do that video one day explaining how to add custom validators to yup using typescript 😊
Bruno you deserve a part of my salary, you helped me so much with this
I really appreciate your words my friend 😍 use the money for a good dinner or anything you like 😉😉
thank you very much Bruno. a very clear and fun tutorial. helped me a lot ❤
Hello sir you dropped this 👑. I'm jumping between your formik videos and I must say you are amazing my friend.
😍 you made my day worth it Elias ❤️ thank you very much my friend 😍
PS - If there's any video you would love to see on the channel, let me know 😀😀
@@BrunoAntunesPT Thank you my friend
I think TH-cam deleted 3 comments from you 😔 I received 4 notifications but only see one comment 😔😔😔
Regarding your question on this comment, you can put the state on react context 😀 if you have the luxury to have your component inside the form itself, then you just need to call that useFormikVontext hook 🙂
if you have a repository I can look at, I can give you much more accurate recommendations based on your needs 😍
@@BrunoAntunesPT Hi Bruno, whenever I post a link for my repository in the comments it gets deleted directly, my code basically looks exactly like the code you used for the FormikStepper and Multi-form, what I just need is to access the values of the form inside the FormikStep, I'm sorry I tried posting a link for my code here but it wouldn't work. (Ps: if possible I will need the solution without typescript) Thanks a million times king
Yep, TH-cam for the last few weeks has been very "aggressive" blocking comments with external URLs :(
Feel free to share the Link with me on Linkedin, because having a repository to work on, makes life a million times easier for me :)
Thx, bro !
I don’t know english good, but watching your videos and understanding all themes.
Glad to hear that! Thank you 😊
I generally dont comment much. Thanks Bruno. Much needed knowledge for me; Keep gng. u got a new sub
Woooow!!! 😍😍😍😍
Thank you sooo much Sai ☺️☺️☺️ I hope you enjoy the other videos on the channel 😀
@@BrunoAntunesPT sure Bruno
Hi Bruno, Is there a way to show a text field based on validation of another field. For ex: if a text field which takes amount crosses certain limit, i need to show a text area for the reason. Any help would be grateful, thanks in advance
I have exactly what you need in this video between a checkbox and a textfield 😉 th-cam.com/video/l3NEC4McW3g/w-d-xo.html
Then the only thing missing is a ternary for the hide and show of the amount of money text field:
{erros.amount? : null} 😊😊
Let me know if that answers your question 😀😀
@@BrunoAntunesPT _/\_ Thankyou so much
really you are cheerful and beneficial guy, (LOVE YOUR VIDEO) , many thanks
I feel like i have no clue about react when i see your Videos :'D
You're great and very experienced!
Thank you very much ❤️ I'm still bad in a ton of stuff 😅😅😅 the goal is to improve everyday on something 😍
Bruno, i find your videos very helpful and very well explained💙 thanks u a lot
Thank you very much 😍😍
Wow!!! One of the greatest tutorial....
Glad it was helpful! :)
Terima kasih sangat membantu , im from indonesia your amazing bro
Thank you very much 🙏🙏
you make a huge contribution to my programming learning. thank you
I'm soo happy reading your comment Rafal 😀😀😍😍😍
It was to help people that I created this channel, so your comment makes me feel fulfilled 😍
Thank you for your words Rafal 😀
So genuine feedback, I try your methods from two of your videos and I always run into errors I have no idea how to solves, turns out you are using typescript, I don't think most of your audience will be using typescript. May want to consider that. Gave you a thumbs up though.
Thank you for the feedback and the thumbs up my friend. I understand your point, completely! :)
The thing is that where I live (London, UK) most companies nowadays have typescript as one of their requirements. That's the reason I use typescript on my videos to help people over here :)
What errors are you getting on this video (or previous videos) because it's in typescript? I can help you convert it into JavaScript :)
PS - You can drop the TypeScript in this playground and on the right side you'll get JavaScript: tsplay.dev/oN5A9N
Another nice video of react and formik.
I'm glad you enjoyed it my friend 😀😀
I'm thinking about also doing a multi file upload soonish, but not sure if it's something people need/want 😅😅😅
@@BrunoAntunesPT ya i need the multi file upload tutorial.
Thanks Bruno for the video, love it !!
Awesome 😍
You're amazing my friend
😍😍😍 You are amazing David!!!! ❤️
Thank you very very much 😀😀
excelent video, so usefull end very complete.
congratulations!
Really great and helpful video! Thanks a lot! Solved all my problems :)
I'm happy I could help 🥳🥳
Bruno, your videos are always so informative. Thanks for the content! Would love to see more from more often. See you soon!
Thank you very much for your words 😍
I'll try to soonish make a video about multi file uploads, not sure if it's something people want to see. What do you think? 😀
bruno is back. great lesson as always
Thank you very much Manoj 😀😀 I think I'll prepare a multi file upload next, not sure yet if people want it or not 😅😊
@@BrunoAntunesPT i would love it, since you do it different than everybody else. By the way why did u deserted the react course ?
Awesome I will prepare a multi file upload then 😀😀
Well I didn't just desert that series I deserted TH-cam completely for like 2 months. Slowly, as things improve in my life I will come back to TH-cam progressively 😊😊
this video is part of that react series, one of the last planned videos there 😊 one day I need to do more videos there for initial topics tho 😊
Amazing tutorial! Thank you very much!
Thank you 😍😍
You are great dude!!! Thanks
You are great too 😊😊 thank you 😍
Thanks Bruno ? great teacher : good accent :)
Thank you my friend 😀😀 to be honest I personally don't like my accent or my voice ahahah 😅😅😅
@@BrunoAntunesPT I'm from the US and I absolutely love your voice
Thank you Noah 😀😀 it's sooo nice to read those words coming from a native speaker ❤️❤️
Thank you very very much for the confidence you gave me 😀😀
Hii Bruno, have been watching your tutorials for quite some time now and I love the way you explain and make it so easy.
I followed along with your formik multi-step and field-array tutorials and they worked great. However, when I'm trying to combine both in one of my projects it's throwing errors. Now, I understand what's wrong with the code but do not know how to solve it.
In the field-array project we can destructure {values, errors, isSubmitting} before starting the component. But what do we need to do when we have to implement field-array in a multi-step form ?
Right below the FieldArray opening tag we pass arrayhelpers ex:- {push, remove} . Along with these we also need to pass form prop so now, it will become {push, remove, form} and then use {form.values.fieldname.map()} etc inside the fieldarray and it will work.
Hey Bruno! Welcome back :)
Thank you Nedim 😀😀😀😍😍
Hello Bruno !!
I'm looking documentaion to create a map inside another map with Formik, do you have any idea?
Adoro seus conteúdos !!! Parabéns.
Muito obrigado Daniel 😍😍
Hello Bruno, nice work man!, I'm currently watching your next js series. I have a question for you, do you feel like switching to React Hook Forms? I was using Formik in a really long 12 step form (60+ fields) and it was really really slow. I tried to optimize with FastField but I found that FastField was not working. Have you faced this kind of problem with Formik?
Thank you Julio 😍
I'll be 100% honest with you. The main reason I don't change to react-hook-form is mainly because of their breaking changes from release to release which are quite hard to apply in applications with thousands of components 😅😅 This one is only a few days old: react-hook-form.com/migrate-v6-to-v7/
If your application is small, that is not a big deal, but when you have multiple applications built by 20/30 people, coding everyday for the last 2/3 years, those called "small breaking changes" become a bit harder to manage... not impossible by any means, but annoying 😅😅
Don't get me wrong, react-hoook-form is amazing, but Formik has never failed me in very important applications. Also it has been without breaking changes "since forever", so for the applications that make me money, I prefer to keep them on Formik for my peace of mind and as I said before, it has never failed me on important moments 😃
I have a few applications on react-hook-form, but...for some reason my brain still feels more comfortable and easier with Formik --- time may change my thinking tho, but for now that's how I feel 😅
PS - Regarding having 60 fields in a form, I think my Designers/UX would "kill me" even before I notice any performance problem 😂😂
@@BrunoAntunesPT thanks a lot for your answer! It helps a lot and I'll take your approach on this. Thanks man.
And yes, it was 60+fields (many of them could be added dynamically). Sometimes client is a bit too much persistent 😅. But it's ok now, that project ended up well and I'm looking forward to Next js
I already promised in the comments to other people, if I ever start to feel better while using react hook form, I'll make a tutorial about it.
BUT I'll not do a tutorial about it while I don't move my main apps migrated into it 😅
basically if I don't use it where I make money (my main apps), I'll not create a tutorial just for the views that it could bring to the channel 😊
@@BrunoAntunesPT you are an inspiration man! Thanks a lot
Great tutorial
Thank you 🙂
Thank you so much for your video!
Thank you my friend 😍😍😍
Talaivarae You are greattttttttttttttttt...................thanks for your Video...............................................
Thanks for sharing this.
You are welcome my friend. Thank you for watching 😊
Hello Bruno! Great tutorial as always!
I played around with adding lots of donation elements and when I start typing in the institution or donation amounts it starts to lag and get a bit slow during development. I can imagine for a larger application with many more fields and field arrays it will be very laggy. Have you experienced this before?
Thank you =D
Well... Formik is known to be a bit slow when you have many Fields on the screen (sadly).
They have an optimization called FastField: formik.org/docs/api/fastfield
From their docs: is an optimized version of meant to be used on large forms (~30+ fields) or when a field has very expensive validation requirements. has the same exact API as , but implements shouldComponentUpdate() internally to block all additional re-renders unless there are direct updates to the 's relevant parts/slice of Formik state.
I have one of my applications that needed lots of fields using react-hook-form, but I honestly prefer the formik API, so I'm debating with myself for like 1 year if I should move to react-hook-form or not xD
@@BrunoAntunesPT Thanks for your reply! In terms of performance is react-hook-form better?
If you have 10 or 20 fields, for your users is not noticeable.
If you have 20 or 30 fields, depending on their device power you might start to notice some difference 🙂
In the react hook form docs page they have a comparison with formik and the re-renders from each library 🙂
Hey Bruno! Thanks for the video, really helpfull. Can you tell me what is the name of this extension for importing? Looks really nice. Cheers!
I have no extensions installed on my videos (apart from prettier)
You can do Control + . or if on Mac Command + .
Your videos are always so informative.I have 2 questions, first :how can I show error message if user leave the array empty ? second question : how can I created one big form contains subform which contains save button , how can I handle this . Thank you.
Thank you =D
We are already showing an error message when the user leaves the array empty. If you delete the current donation I show the message "You need to provide at least 1 institution" :)
You can check the codesandbox for this video here: codesandbox.io/s/goofy-volhard-yru1w?file=/src/pages/index.tsx
Let me know if that helped :)
Olá Bruno, muito bom o contúdo, parabéns e obrigado
Eu tenho um cenário, onde por exemplo, as doações não podem ser repetidas e eu preciso apontar qual campo está repetido... daria pra fazer isso? como faria?
Abs.
hey thanks a lot man u saved me ...🤩🙏🙌
How to perform edit operation in formik , if if we have object inside array and want to rename value of one key
Hello, what about the type="file"? Do you have a example of this using the FieldArray?
Yes 😅
th-cam.com/video/MAw0lQKqjRA/w-d-xo.html
@@BrunoAntunesPT I love you!
Does anybody else have a problem with/solution to a TS error concerning the yup test method? "Argument of type '(donations: Array) => true | ValidationError' is not assignable to parameter of type 'TestOptions'.
Property 'test' is missing in type '(donations: Array) => true | ValidationError' but required in type 'TestOptions'". Thank you! And Bruno, you've got a talent, you can teach very well. :)
Thank you very much Dan, I really appreciate it 😀😀😍
I cloned my repository and I don't see any warnings on "npm run build".
Can you share your code to see that typescript error/warning? 😀
PS - In doubt, I also updated all the npm dependencies (just to double check), but I still don't see any error when I build. My GitHub repository in case you want to check - github.com/bmvantunes/youtube-2021-jan-field-array-formik
@@BrunoAntunesPT I updated the deps according to your repo, restarted the TS server, restarted the project and the error is a bit different now, but still is there nonetheless.
And the code is exactly the same as in your repo, I copied yours to try and see where the error is. "....test((donations: Array) => {..."
"No overload matches this call.
Overload 1 of 4, '(options: TestConfig): OptionalArraySchema', gave the following error.
Argument of type '(donations: Array) => true | ValidationError' is not assignable to parameter of type 'TestConfig'.
Property 'test' is missing in type '(donations: Array) => true | ValidationError' but required in type 'TestConfig'.
Overload 2 of 4, '(test: TestFunction): OptionalArraySchema', gave the following error.
Argument of type '(donations: Array) => true | ValidationError' is not assignable to parameter of type 'TestFunction'.
Types of parameters 'donations' and 'value' are incompatible.
Type 'TypeOfShape[] | undefined' is not assignable to type '{ percentage: number; }[]'.
Type 'undefined' is not assignable to type '{ percentage: number; }[]'"
The only difference between our projects are that I don't use next and have more packages included.
Can you share your repository?
Without running it myself is impossible to know what's going on 😅😅
@@BrunoAntunesPT I put it to a codesandbox here codesandbox.io/s/loving-breeze-kc95i?file=/src/FieldArrayDemo.tsx
The TS error looks exactly the same. Thanks for your help. :)
With code it's always easier 😀
Fixed: codesandbox.io/s/suspicious-kowalevski-fr9o4?file=/src/FieldArrayDemo.tsx
Basically you are using strict:true (which is good) and next by default uses strict:false. Now the code is fixed to work with strict:true even on my repository:
github.com/bmvantunes/youtube-2021-jan-field-array-formik/commit/ab924f3f5ab7b0c68a6c938b91dca713829a2b05
Thanks for this 😀
Great video thanks
Great tutorial but I have a problem same as that, about updating the data. Like the user is going to update the stored data and he/she wants to add/delete a the dynamic form? Thank you in advance for your advice
Sorry, but I don't understand what you want to achieve 😊
Do you want do delete all the fields? If that's the question, you can delete them all by clicking on delete until there are no fields left on the screen - but probably this is not what you asked 😔
😅 Sorry for not elaborating properly. What I mean is like when creating CRUD with the same kind of approach based on your tutorial. How can a user update the data using that form because I'm kind of using your approach to one of my projects, but unfortunately, I'm having a hard time, dealing with UPDATE like updating the data that has been created with those dynamic fields. How can I update my data in the dynamic fields to add more or delete one. I hope you understand the explanation 😅 I'm not that good in elaborating.
On the UI or in your database?
If it's on UI, formik has a property to reinitialize the properties based on the initialValues changing: formik.org/docs/api/formik#enablereinitialize-boolean
Thanks man, such great help. Thank you for your response ☺️
I have a doubt, what if I delete (click on delete) after refresh, so there won't be any field left right, to get the page to normal we will have to refresh and that won't be a good practice right. Kindly help me with that. Apart from that, the video is very very informative and I found it just in time as I needed this thing for my college project. Thank you so much!!!
Thank you very much for your kind words 😊
We have a button to "delete" each row and another one to "add donation" globally at the bottom, so no need to refresh the page 😊
The "add donations" is always visible, so at any point in time you can add one more donation, even if you have none on the screen 😉
@@BrunoAntunesPT Ohh right, that was simple, OMG. Thank you so much for replying. Love from India
You are very welcome 😊
Love to India from my tinny London apartment 😀😀😀😀
Hi Bruno, I hope a video for MUI v5, thanks for your content
I'm migrating a very large application to material UI 5 (from material 4). When that migration is over I'll do a video showing all the pain points I faced (or at least the most common ones 😅)
Awesome video ++++++ 😃
Sir Great Explanation
Love From India
btw sir im getting an error "'FieldArray' cannot be used as a JSX component."
can you please help me...
Question. How can I validate lazily until I hit submit, so I don't get some errors when I start to type?
You want to add validateOnBlur to your formik component 😀
formik.org/docs/guides/validation#when-does-validation-run
great! anyway, do you have idea how to insert the values into sql database? i'm using node js and async await but doesn't work well. only the first values are inserted to database row
Thank you 😊
What are you using to connect with your database?
Raw SQL?
Prisma?
TypeORM?
Something else?
@@BrunoAntunesPT mssql. i dont have idea on how to insert loop in backend code
@@xhaimraez4227 is your code open source? Can you send the repository?
@@BrunoAntunesPT good news! I already found a solution 😆 very thanks for your concern 😍
That's very good news, congratulations 😊😊🎉
Can a object array that is selected on a Typeahead be saved to Formik Array. If so, how?
That's exactly what we did in this video. We have an array of objects with 2 properties (institution and percentage ). The only difference is that we don't use a typeahead, but that is a visual component, formik doesn't care if it's typeahead or not 🙂
Love it
Thank you my friend ❤️❤️❤️
I need to notify youtube that why i get notification a week later!! I just refactored a lot of code yesterday moving from react-hook-form and yup to formik, formik-material-ui and yup. I was really finding difficult to register form elements from mui dialog, spent 2-3 days trying to figure out. In one day refactored all my code to formik, formik-material-ui and yup, and it was a breezer. Did you ever try React-hook-form? They claim a lot about number of renders, which i also saw while console.log. What is your opinion?
Yeah TH-cam notifications sometimes are a bit weird 😅😅😅
I have tried react form hook in the past and I like the idea and everything. But for some reason (probably because I'm used to it) I still prefer formik for complex form structures 😊
In the end we should use what we feel gives us the best developer experience without sacrificing performance ❤️
@@BrunoAntunesPT My friend after all refactoring I'm really struggling with just one thing. I'm using Select from formik-material-ui and want to have outlined. Not able to get the style correct at all. :( Pls help. codesandbox.io/s/falling-sound-u8ftf?file=/src/App.js
Have you check this page? stackworx.github.io/formik-material-ui/docs/guide/faq#manually-bind-the-error
Is this what you wanted? =D
codesandbox.io/s/exciting-microservice-pp79e?file=/src/App.js
@@BrunoAntunesPT : you can see the styling issue on the label. Tried all my luck to fix it, absolute failure.
Hi Bruno, Can we add validations for dynamically added fields. Like, if i get fields that needs to be validated from API, can we add them to schema on runtime? Thanks in advance
The validationSchema is a prop like any other 😊 you can change it at runtime without any problem
Regarding validating fields with an api call you can check the async validation section here: formik.org/docs/guides/validation
Let me know if that helped 😊
@@BrunoAntunesPT Thanks bruno. Can we get validation fields and validations over the api. Is that possible? Like a name field has "Required" , "min-length","max-length" etc over the api
Yes, it's possible both ways 😊
You can receive the type of validation (required, etc) and create the validation schema based on that
OR
You can validate directly in the api via the method I sent in the previous comment 😊
@@BrunoAntunesPT can u pls help with the api body. how it look like. or any resource. i have too many things in the etc u said. 😀
In reality you can send any API body you want, what matters is what you return from the validate function 😊
Open this URL and go to the section called "// Async Validation" - formik.org/docs/guides/validation and you'll see something like this:
```
// Async Validation
const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const validate = (values, props /* only available when using withFormik */) => {
return sleep(2000).then(() => {
const errors = {};
if (['admin', 'null', 'god'].includes(values.username)) {
errors.username = 'Nice try';
}
// ...
return errors;
});
};
```
As we can see in that example, you need to send an object with key/value pairs. The key is the name of your field that failed validation, the value can be a string, for example.
For example, if you want to fail the field "age" and "country" you can return on validate something like { age: "You need to be at least 18 years old", country: "Your country is not acccepted" }
If you send an object like that in your validate function, formik will mark those 2 fields as "errors"/"failed validation".
I hope this helps 😀
Hi video was great.. Thank you.. Can you or anyone tell how to access the parent object value inside the validation of field array fields.
Hi Bruno, some time is gone, when we had chated. I've already found a job for junior position, I want to wish all world's goods for your soul, you are the one who was staying with me while I was going to this moment :) What about ant design, it would be great if you showed good practice with its form items, controlling, tables and etc. Material also cool, but with estimation on tasks at the job don't have enough time for practicing, after job I'm watching videos about indonesian islands and choosing on which island i want to go in nearest future😅😂
Congratulations my friend 🎉🎉🎉
I'm very very happy for you, I'm sure you'll do very well on your new adventure 😀😀 please keep me posted ❤️❤️
Regarding Ant, I used it for a while, but I still prefer to use material and for some apps tailwind 😅😅
I hope we can go back to normal and visit those wonderful islands, we might even do it together one day 😍😍
@@BrunoAntunesPT haha, you know, it would be so unrealisic for me :) I will write you when I will be prepared for the trip😉
I'll be waiting for that invite 😀😀 and between now and that invite, keep me posted on all your success my friend ❤️❤️
@@BrunoAntunesPT of course, thanks and bless you😉
Hi, Do you Have any Course on React with Typescript???
As Typescript is growing more and more day by day, Each and every Company Asking REACT with Typescript Combination..
Can you please Release and End to end Course on React, Redux with Typescript please..
Do you have any Course on React , Redux with Typescript??
I have a light introduction to typescript that you might find useful: th-cam.com/video/0cXccUew19k/w-d-xo.html
I might in the future make a deeper video taking that video as a starting point 😊
Regarding redux, I don't use or recommend redux anymore 😅😅
PS - I was a very big supporter of redux until like 2 years ago 😅
how can i use material ui switch and select with formik fieldArray
For the switch you have stackworx.github.io/formik-material-ui/docs/api/material-ui#switch
For the select stackworx.github.io/formik-material-ui/docs/api/material-ui#select
Let me know if that's what you were looking for 🙂
"My name alone is bigger than 10 characters". Portuguese problem 😁
Ahahahah very true 😀 our names in general are gigantic 😅😅😅
My mother's full name is exactly 50chars (counting with spaces) 😅😅😅
Hi,
if anyone can help me with this.. gotta make a SinglePageApplication, a simple sign up form, the screens required are:
step 1 - asking for users name and phone number
step 2 - asking for users email and data of births
step 3 - should present all the users details for confirmation
step 4 - sign up completion screen
not sure how to solve the transition from 1st to 2nd step. also, if I have to use session or local storage to present users details on step 3..
You can use something similar to this for your steps: th-cam.com/video/l3NEC4McW3g/w-d-xo.html 😊
Super Super Super
Thank you =D
@@BrunoAntunesPT can you please also make a tutorial for dynamic dependent dropdown using field array ?
ty
Please! Make a tutorial on C# ASP.NET
I love c#, but at this stage I'm a bit away from it - I might come back one day 😊
PS - To be absolutely honest with you I'm still missing my good old entity framework, an amazing orm with great migrations 😀😀😀
Bro why u take one month time to make new video
I'm waiting for your video:)
I'm very happy you missed me 😅😅❤️❤️ and sorry for the lack of videos, I know I was a month away.
The truth is that since lockdowns started in London it has been very hard for me to conciliate TH-cam with my family and work... Hopefully I'll learn how to do that soon ❤️❤️
@@BrunoAntunesPT it's ok
Do this in react hook form!
Você é brasileiro?