React Forms with Formik, Yup, and Material UI

[Music] hey this is chris and in this tutorial we're going to go over how to use formic yup and material ui to rapidly spin up some forms with some validation take uh all the ui concerns out of it and uh and get everything set up right out of the box so i've got a i just made a new create react app here that's the only step that uh you may not have done yet so go ahead and and do that and then we're going to add a couple of packages so we'll do yarn at yarn add at material dash ui core yup and formic and so material ui is just a ui library yup is what we're going to be using for validation so we'll check our fields and display errors if any pop up and then formic is the form library that's going to take care of uh keeping track of the state of our different inputs um and make everything nice and easy for us to uh build out our forms so i'm gonna go ahead and yarn start this and bring it over so there's our app and i'll bring this down a little bit and so we'll just do this in our app.js so we can get rid of this middle chunk here and we don't need our logo anymore at the top and so we're going to need a couple of things we're going to go with the hooks version of formic so we'll import use formic we're gonna import star as yup and then we'll go ahead and import a couple things from material ui so we'll do a text field and then we'll do the same thing but we'll do a button so we can submit it and now we can start building out our form so let's just get the let's handle the ui stuff first so inside of our div we're gonna have just a plain old form tag and then we'll have a couple of text fields so we'll do text field and let me close that off and so in here we'll do id equals first name name is first name label is first name and then we'll come back to a couple of other fields um that are going to be helped out by formic but we can go ahead and copy this and we can do last name we can do one more we'll do uh email and then finally we'll have a button where we'll say submit we'll give it a variant of let's do outlined and let's take a look at what we've got so far all right so there's our form we can do a little bit of styling as well so let's do why don't we do inside of app actually inside of that form we'll do display flex flex direction column and then we can do let's do a width of maybe 20 rem and then a margin zero auto cool so now it's centered up for us um we can do actually let's do let's add some margin to the top just to get a little bit lower on the page and then a couple of other things just kind of some stylistic stuff let's do a margin of uh normal cool so now there's a little bit more room and so if we type in these they work but nothing meaningful is happening yet so let's go ahead and add some meaningful stuff so now that we've got our ui set up we can start messing around a little bit with formic so inside of our app we'll say const formic equals use formic and this will take in an object so with formic we set it up similarly to um setting up form fields with the use state hooks where you have a variable and an updater function this handles all of that out of the box so if we set our initial values and we can identify each of our each of our fields by their by their name so we can say first name is an empty string last name is an empty string and email is an empty string so we're just setting these initial values up to be empty strings we can have an on submit in this as well which will take in our values and we can just console log those values we can json dot stringify our values so now we have this formic object but we're not referencing it so you might be able to tell that this is um a little bit faded so now we can grab these formic values by referencing this variable and attaching it to some different sections of our form so first if we want the on submit all we need to do is on submit and set it equal to formic which is the variable here dot on submit and so now our submit function is wired up for our form the issue is these text fields don't know what these values are so we might be able to submit but we'd probably get an error let's take a look if we open up the console if i submit so nothing's happening there one last thing to uh check real quick before we move forward just making sure this is type submit and again this i'm not expecting this to work but so we submit okay so nothing meaningful there um so let's go ahead now and wire up these values so we can actually pass in some values to stringify so inside of our first text field we're going to set our value equal to formic dot values dot first name so now this is referencing our initial value this first name object or first name key which is set to an empty string we'll do the same thing for last name and for email the next thing that we want to do is make sure that we are tracking the changes by adding an onchange handler so out of the box this formic library comes with an onchange handler that will wire up the changes in the value to our values object so i'll show you what that looks like if we have on change we can set this equal to formic dot on change so you're not seeing on change here this on change method comes off of just using being able to use forming so this use formic hook out of the box has an on change similar to uh this on submit which we have already wired up so on change we can just copy that and my mistake this should be handle change and this should be handle submit which is probably why we're getting the the error or the um just refreshing the page earlier so form a candle change we'll add that to our other fields and so now if we type some stuff in we should actually see something happening so we refresh we submit first name is blank last name is blank email is blank if we start typing some stuff in cool so now we're starting to see our values coming through something that uh i really like about formic is how well it plays with yup so yup is our validation library so in this case i have my first name but let's say that last name and email address are required i don't want to allow the user to submit this form if the required fields are missing so what i can do is wire up a validation schema using yup and then i can show any errors if any of those fields have any errors so that the user can then fill them out correct them and and then move on to submitting the data as intended so we go back here above our app we're going to define our validation schema so we'll say const validation schema this is going to be set to a yup dot object and we can just define our uh like our required fields or error messages or things all inside of this object so first we'll start off with first name so we'll say that first name should be a string we'll say required and inside of here we'll have our required message first name is required we can do the same thing for last name and then lastly our email and we can say that email is also a yup that string we'll attach the email method so this will check to see if it's a valid email address and we'll say enter a valid email and then we'll also say that this is required so it can't be left empty and we'll say email is required so this is our validation schema i mentioned that it plays very nicely with formic because it just works like this formic accepts a validation schema validation schema and we can just set it equal to our validation schema from above so we're not going to see anything yet in terms of ui in order to do that we want to utilize material ui's error property on our text field as well as some helper text so what we can do here is we can say all right if there's an error we're going to check to see first has this field been touched so has the first name field been touched and so what this does is it avoids your form loading and then just showing errors without the user having done anything so when somebody clicks in that'll set the touched property to true and then afterward if there are any errors then the errors will show up so if that's true then we want to also check we can say boolean so we can turn the following into a boolean if if there are errors dot first name so has first name has that field been touched has somebody gone into that field and then are there any errors and we can just set this to a true or false value and then the last thing we'll do is set some helper text so that the user can see what those errors are and then hopefully fix them so we'll say formic dot touched dot first name and formic dot errors dot first name so the difference between this and this is that this one is setting this to a boolean so if there are uh first name errors then it's true if not then it's false and this is actually showing the first name errors string which if there are any errors in this case required so if it's not filled in then this error message shows up so that's what this is referring to so now we can just copy these two and paste them and then we'll just update the the fields so we can say first name will be last name instead and same thing here we'll do email so now we hit save and everything should be wired up so i'm going to go ahead and refresh this if i hit submit first name is required last name is required email is required so now and notice that the error goes goes away right as i enter my uh my name you'll also notice that in the console so if i fix that error if i hit submit it's not allowing me to do it because there are error messages here so this is super nice you can wire up you know like a disabled and you could set this to uh be true disabled is true if there are any errors or things like that but it's nice that it kind of handles that for you and then shows those error messages so i submit emails required enter a valid email so this is not valid yet and now it is i hit submit and there's all my information so material ui formic and yup powerful combination for handling ui out of the box so you don't have to worry about design as much handles all of your validation so it shows those errors and it manages all of the state for you so you don't have to wire up multiple use state hooks or anything like that you just set your fields and initial values you have your on submit you have your validation schema and as long as you have all the um correct properties here which this is the uh just about the minimum that you would need for each of those unless you don't want to share your show your error or helper text then you're all good to go so as always if you have any questions leave them in the comments hope you enjoyed the video and uh until next time have a good one

Channel: Chris DeSilva

Views: 9,196

Keywords:

Id: AWrcmat6CGo

Length: 17min 56sec (1076 seconds)

Published: Wed Feb 03 2021