React & Material UI #28: MUI Forms + Formik

hey everyone in today's video we're going to be going over matild ui forums as well as combining these material ui forums with a library known as formic um this was actually given to me as a suggestion from my last video by and i'm sorry i'm gonna put your name uh dana gel um daniel i don't know if that's how you pronounce it but sorry for that um but yeah pretty much we're gonna go over how to use formic when to tell you why what it is if you're not familiar with it why it's useful and i also want to say thank you so much for everyone who commented on my last video where i asked for some direction on the channel after matilda ui was done um i really appreciate it i read every single one of these um i love the suggestions and as i always say if you find value in this video please consider liking uh subscribing leaving a comment i try to read every single comment and i love interacting with you guys and the ideas you guys put forward i wouldn't be able to do this without you guys so let's jump straight into what formic is essentially formic is a library a wrapper that goes around material ui text fields and other materie input components that makes creating forms with form validations and form inputs and submissions a lot easier than it would be normally with really why if we look at the material ui text field component which is pretty much where the majority of this stuff comes from you'll see there are a lot of different types of props you can pass into their text field and you can make your input look very different and can control a lot of things but in terms of form validation and actually creating a fully functional form they don't really give that much help when it comes to doing that and you'll see here for example um validation is one big example they have a prop for validation but this prop will pretty much only change the way the component looks as in making the title in red having a red underline etc etc there's no real logic that allows you at the end of a form when you click submit to know whether or not a element in that form has been submitted correctly for example if you have a form number you have to build all the logic to check whether or not that form uh that phone number is a in a valid format by yourself and that's where formic comes in so i've been using formic for a little bit and it's not too complex once you get the hang of it um i don't think their documentation honestly does it justice um as you can see here they have like a quick start and in the quick start um and the getting started guide pretty much they will have uh examples of all the different ways um you can use it for sort of the different material libraries and really quickly let me explain what format formic really does essentially when you are creating a form at the beginning of the form you are going to have a formic component at the top and this will be sort of like a provider where it provides values for any other formic component that is nested within it then within that formic and i'll explain all this stuff it looks really complicated i'll explain in a bit um within all of that stuff you actually have all your text fields and your text fields um what they will do is they will take in a component and that component is a material ui component so essentially this wraps around whatever material ui component you pass through it which also means if you are using this with material ui you are going to want to import material ui components in most cases into your application and pass it into the formic component so that's why when you're seeing the installation guide you'll see here that when they show you installation not only are you installing formic and formix um utility wrapper but you're also installing materia core that's also why they want you to install material ui lab and material ui the formic material lab because lab will come with certain components that if you want to wrap formic around you will need it in order to use the formic until ui lab component for it and i'll show you examples of this so just to clear that up that was one of my biggest confusions when i was looking at this i was like if this is supposed to be a complete form why are we still importing me to ui elements and pass them in um that's the answer to that and you'll see here when we go to the quick start for lab you can see in the lab they're importing the autocomplete component which um if you're not familiar with material lab montoya lab is sort of a place where they have some experimental not really fully stable components um that autocomplete happens to be a part of um and there are a couple other ones in there as well and then finally if you scroll down you'll see that there's a picker and this picker um library has things like the date picker um so i'll show you an example of that uh soon as well but that's pretty much the most that they give you when it comes to a materiel ui and if you look on their github they have two links one is to the documentation which i just showed you and sorry if i'm stuttering a bit my nose is a bit stuffed up but um they have the material uh their documentation over here which is sort of like what i just showed you it's not the best because you can't really see any examples and see how this correlates to anything but they also have this code sandbox link and this code signmouse like is really the goldmine when you're learning formic um because right here they have an example of how every single possible thing you can implement with formic works uh for example they have some text fields with emails um passwords they have a remember me button slider we got a select we got a tags thing we have um a time picker and we have date pickers we have date time pickers we have some toggle buttons and finally we have uh auto complete um and then you have the submit button so this i really i'm going to link to this code sandbox link in the description this video i highly recommend you guys check it out and play around with it now i'm gonna go through this entire file right now and explain how everything works so that it's crystal clear when you do get your hands on this code sandbox link of what is going on with this component so first of all let's take a look at the imports we can see here we have formic we have a bunch of things that they want from material ui um they we have a lot of other uh formic things that they're importing like i talked about before they're importing the specific formic wrapped around material ui components we have the one for just regular material ui we have the one for pickers and we have the one for uh the lab and then we have some other small things like format align justify icon and stuff like that um that's just these icons that you see over here so you don't have to worry too much about this stuff and finally they're wrapping everything in box all that's really doing is applying some padding and some merging and applying some uh display styles to the actual uh component itself just so it doesn't make everything look too bunched up so now let's get over here so these ranges this is pretty much just specifically for um this select component right here you can see that they are just uh defining um some constant values to use in this drop down so this isn't like a forming specific thing you don't have to really worry about that um if we scroll down here we can sort of skip over this uppercasing text field um it's sort of self-explanatory um it in in the terms of this is just a helper function i think it just helps with um having the actual uh things inside of here um get uppercase either on submit or being displayed um but it's not very important um in my opinion i don't think they should have included in this code sound box because i think it sort of clusters it and if i were learning this for the first time it would look pretty confusing but let's jump into the actual meat of what formic is so you'll see here when we have our first opening formic tabs um formic components sorry um there are three main uh sorry there are four main uh categories um and props that are being passed in here that you need to know about number one is initial values number two is validate number three is on submit and number four is the render now each one of these plays a very important part when it comes to actually using formic the first one will set all the initial values of every single field um inside of your application inside of your form so for example we can see the email the initial value here is set to nothing but if i were to set it to like anthony gmail.com which i wish was my gmail you would see here when i reload the form it'll just pre-populate the email field and i'll show you how this correlates to the actual email form uh just by using this key over here in just a second but the initial values is pretty straightforward it's just all the initial values you want to see if you're using date and date time stuff i highly recommend passing in the initial value of new date otherwise you'll have some if you just pass in undefined or something it'll look okay but it'll have some really weird bugs so um you should just copy new date um unless uh specified otherwise if there's some other date that they would want to pass in there for your default value um one application i like to use the formic is um whenever i have a forum on a site i will you know the first time they fill out the form it'll look empty and then if they ever want to edit the form it's really nice because i can pre-populate this field with all their previous answers from like redux or something um so that's something really cool once you get a bit more familiar with forbic to try uh doing um and testing out some we have validation now here is where all the actual validation comes out so for example if i were to in this email address uh field type in like asdf and not have like you know the valid email address where you have at and stuff like that then you'll see here i get an error that says invalid email and you'll see here that um the way it's structured and there's only validation right now for emails but the way it is structured is that we can see here this uh validation prop um once you open it up is just pretty much and this is in typescript by the way um but if you wanted to use this in regular javascript you just get rid of like the type identifiers and stuff like that like that um but essentially um what is happening here is you're just creating an object called errors and within that errors object you set um the actual object key itself of for example email so any one of these fields that you have to be equal to whatever depending on a condition so in this case if and values is the variable um that come that is actually keeping track of everything in the form so that's why they're using values for everything here values is like where all of this information once you type it in is being stored um which is good because in contract to oh i guess by the way this is what the uppercase thing does anything i type in here is uppercase um so it just makes it slide whatever you type in here gets converted to uppercase so that's what this whole thing is doing i realize now i'm having typing all that stuff in but um essentially with a regular form you would have to keep track of every single thing either via state or something like that if you wanted to do validation but here they are doing that under the hood so all you have to do is pass in this values um option uh this values parameter and you'll be able to access everything so in this first if statement they're checking if values is null then you set an error that um it needs to be required so you can see here if i were to reflect the page it won't show up initially but if i were to click on it and then click away that's when values will update and that's when this validate will run and that is when it'll show the error so if i click it and click away it goes into this if statement every time i uh click away from a field and it'll be like okay um if there's no if in the values object there is no email field then create an error for email that says it is required and you'll see that's where it comes up so i can say something i can change this to be like if values.email.length is uh less than let's say two characters then we'll say you know email has to be greater than two characters and if i were save that into refresh uh you would see here that um if i were to click away um i would still get the error because obviously undefined is less than two characters but if i were to type like d e i would get a different error that's invalid email address and that is being caught here so this is just some fancy projects that makes it so that you pretty much whatever they type in here has to be within email format and if you're not too familiar with the regex you can find regex for simple things like emails and passwords online but essentially all this one is saying is that they have to have something and then after that something they have to have an at sign and then afterwards they have to have a dot um because that's how normal emails are formatted you have some text and then an add sign and then something else and then a dot and then something else after that so anyways reverting that back now let's say we wanted to also make something for this password field you can see i can type in anything and it sort of won't really trigger but let's say we want to make it so that this password has to be at least eight characters long well now i can make a new if statement so if values dot and then find what key the password aligns to which is just password dot length is less than let's say eight um then i can say errors.password equal password must be greater than eight characters um and let's go ahead and save that refresh it uh because this is typescript it's giving me a bit of a weird issue um but anyways we can see here that it's still um it'll still work it'll still give that error and you can check a lot of other things just like we showed up here um so yeah it's just giving a red underline issue because it's a tie script thing but it'll still work on and i don't think a lot of people are going to be using formic with typescript um if i had to guess from the viewers that watch these material ui videos so don't worry too much about that um like i said when you copy this into typescript um sorry when you copy this into your javascript file you can just delete anything that looks type scripty like anything that tries to give a type to a um variable like this you just go ahead and bop that out i'm not sure what else in here uses typescript but i don't think it's too much else but yeah so that is how the validation will work so we've talked about initial values and validation now let's talk about this on submit so this on submit is pretty simple um this will run whenever you click the submit button obviously if the validation and everything is completed as in the validation doesn't return any errors like this what they have in this default and you'll see here values is getting passed in again um so if i implemented valid stuff you'll see here when i click submit what'll happen is we'll get this little oops why didn't this way let's just quickly get rid of the email validations for now just for example sake we'll see here that we get a loading bar and then an alert that gives us a json of everything we passed in so this is what the actual values object looks behind the scenes um so essentially usually and they do what's called set submitting to false so this set submitting variable is only used for that um uh if you saw there the uh loading bar the um linear progress that comes from until ui while set submitting is true which pretty much is happening while um this is being run when you click click the submit button um it'll show that little loading bar there and it'll also have this in a set timeout so that the person can't and a lot of forums um if you're building it from scratch react a problem you might have is like if someone like just spam clicks the submit button over and over again it'll send a bunch of requests you're back in for example um but here they set time out here and set uh submitting to um true because uh or they set the time sorry they set submitting to false so that when someone clicks this it won't actually um be clickable again until like um the alert goes and the timeout is done type of thing um so i feel like that's a pretty cool touch um they let it set for like 500 milliseconds i think that is um and then afterwards they'll set submitting false so it's clickable again and they'll say the alert with the json so usually here's where you're going to want to put like for example if you're using redux saga and you have um an action to send all this stuff to uh your back end um this is where you would put that logic or if you're just storing it in your back end or if you want to display it or do something with that data whatever you want to do with that json data you would put the handler for that right in here um obviously you can delete the alert um and you know replace it with that um and then finally we have the render which is where all the forums actually get defined um you'll see here we have submit forum it's submitting touch errors um most of these um are pretty simple summit forums just um if we sorry go back to where this is being called i think it's in the button it'll just um this is passed in from formic itself so you just want to pass that in as an on click to your button and formic will handle the rest um and if we go here we can see here we have uh essentially so we have our forum and then in each one for each item here for each field um form item we have here we have a box and then a field component um and i'll go back and talk about what mui picker util provider is in just a second but for now let's focus on this so within each one of these boxes we have a field and that field is essentially one input um so we say what the component is you can see here um for this component they passed in the wrapper of the text field with upper casing don't worry too much about that but then we have a couple of things here we have the name we have the type and the label um so type is going to be the type that you would pass into a regular input that comes from uh html itself so you know for example if you pass the type into an input in html and you set it equal to password it'll automatically create this um sort of star variation where if you type anything it doesn't show up um so that's what type is label is what the user will see as the input so for example if i were to change this to like your email you would see that um this would change to your email this label would change your email and now the final thing is name and this name is sort of really important because this is what correlates to the initial values array and what you'll find in the values array and the errors array itself so you want to make sure whatever name you give to your field component you're keeping it consistent with your um initial values your validation error your validation values and your your error values um that's pretty much all there is uh to the basic form components you can see here they're doing a form control label for this remember me thing um so this when you submit it will come out as a true or false um if we scroll down to select you'll see here it's sort of the same we're uh giving it um if you see over here it's it's sort of like a regular input but we've passed in the select prop into on the formix field um api and what that will do is they'll make it so it gives a little drop down and then all you have to do is pass it pass in the actual data itself um which is done by material menu items so if you remember this ranges object up here this range has all the options in an array so what they've just done is they've looped through every single one of those options and then created a menu item for it and um the value is going to be the option.value and then the label is just going to be whatever the label object was here so that's i think pretty straightforward now if we scroll down we have the actual tags tags is extremely similar they just didn't store it in their um in a data object before looping through it they actually just decide to manually one by one output these menu items um and you can see here that multiple is a prop that's being set to true which is what causes uh you being able to select multiple of these at once but it's very similar to select um if we scroll down um for whatever reason they put the estimating up here so if you were to submit something um it would show up in the middle of there but that's what this is um sorry that's what this is right here that's that logic so if is submitting is true aka if the form is being submitted then they're just going to show linear progress if you're not familiar with this end and syntax it pretty much just means if everything on the left of the and and is true then display whatever's on the far right of it um then we have our time picker component so you can see here we're passing the time picker and what that'll allow us to do and this is just an import like we talked about before that comes from up here and what that will do is it'll pretty much just let you pick a time from a material ui this is the material ui basic time picker ui it'll just allow you to pick the time type of thing um then if we scroll down this is where we get to the sort of complex stuff when we get to the date pickers so where was i where was i um up here so right here this date picker and these date pickers so these look simple when you implement it but they're a bit difficult to implement because before you can implement it you actually have to have this mui picker util provider wrapped around uh your component at least uh wrapped around the parent of wherever this form is you can put it with all your other providers in index.js um but usually you want to that's where i would normally put it you could put it wherever you want it just has to be wrapped around on this component and essentially what this is for is um when you if i were to submit this you'll see that the date is in a very specific format and there are a lot of different libraries that will allow you to customize what format you want your date time to be in so what this does is when you wrap your application around in this mui picker utils provider and you pass in a specific date provider library function a utils function for that library it will format that based on that specific library so in this case we're using fns if we scroll up here you'll see that's actually a dependency date io date fns and we are importing the date utils like that so without that it won't actually work and you'll get an error and that's something i got confused upon for a little bit until i did a bit of googling and found that out so if you're using these date pickers or these date time pickers um you need to make sure you wrap your mui picker util provider and choose whatever um date utils format that works best for you so it's pretty much the same for the date time pickers while the only difference is instead of date picker you're passing a date time picker um then if we scroll down we see all the toggle buttons so these are fields um we've pretty much given it the component of toggle button group which once again imported from formic very straightforward and then you just put all the different buttons that you want here and all their values for it and depending on what is picked um will be in the data at the end and then finally we have auto complete autocomplete is a really buggy um component for matild ui which is probably why it lives in the lab but essentially what it does is you pass in a giant array um you pass in a giant array of things and when you type it'll filter that array of things based on the title so for example if i start talking typing in the it'll filter it down so only things with the in it will show up then if i put space and type in for example g it'll only show probably the godfather and anything else that starts with the g which is surprisingly a lot of different things um it looks like they're storing all the data for all these movies in here so that's where they're getting all that stuff in and they're just passing it in uh straight up in the options um in the options prop for this um it's pretty complex as you can see here you have to pass in like a render input and then pass in all this stuff um obviously this is another example of one of those typescript types you could just loop that out of there if you're pasting this into javascript and you want to use the autocomplete uh within the forum um and then yeah finally we talked about the uh submit button but um that is what the end of it looks like um they make it disabled for when you are submitting the on click is the submit form like we talked about before that gets passed in uh through this render uh prop as well so it's a bit weird you have like one component with a bunch of really big props and one of the props is like a render method um but like i said the structure of it once you sort of understand it it's very easy to go on and build your own forms and add for it um a lot of the times you're going to just be using it for probably more simple things i would guess um and even if you're using it for complex things i think using format formic is a lot better than trying to build it uh from scratch but that's pretty much it like i said this code sandbox link is going to be in the description so you guys can play around with it um and yeah like i said before if you found following this video please consider smashing the like button uh leaving a comment or subscribing i try to read every single comment i love interacting with you guys this video like i said earlier was um from someone that left a recommendation so i do read the recommendations and i do try to go in that direction so thank you guys so much for watching hope everyone's staying safe and hope you guys have an amazing weekend

Channel: Anthony Sistilli

Views: 21,704

Keywords: Material UI, Material UI Form, Material UI Forms tutorial, Material UI formik, Material UI React Forms, MUI Forms Formik, MUI Formik tutorial, MUI Formik example, Formik react, Formik Material UI, Formik example, Formik Tutorial, Material UI Forms React, Material UI Input Validation, Formik input validation, Formik react tutorial, Formik material ui

Id: wAvkbSYdyRU

Length: 25min 39sec (1539 seconds)

Published: Sat Aug 01 2020