React Forms with Formik and ChakraUI Tutorial

what's going on so let's use formic to make easy forms that have a lot of functionality so here i just got an empty project with a tracker ui already set up i have a theme that has um a configuration which gives it a default dark theme dark color mode and some fonts by default so but other than that we have an empty app so let me just quickly create a form using chalker ui so so here we just have a basic form using chakra ui the form is a v-stack i did some styles to center it and all that and um to make it a responsive width we have a header that says sign up um some form controls here so form control that has a label and an input pretty basic stuff and a button to submit but um obviously we want this to do something right so let's start using formic to make this a controlled form and every input a controlled input so we can actually add some powerful functionality to this form so first thing we're going to do is use the use formic hook so this hook takes in an object and we have to pass it in in initial values property and here is just an object and we're going to want to match the names of our inputs here so obviously the initial values in this case it's just going to be empty right and then we're going to want to pass in an on submit and it's a function right and formic gives us the values of each input and for now let's just do an alert of and let's do json stringify values and not only does it give us values but it has another argument that it gives us and it's we can call it actions so this lets us do things to our form so we can do reset form just like that now to start using this let's go over here and on change we want that to be formic dot handle change and the value we want to be formic dot values dot username and we're going to do that same pattern for our password input so basically whatever you did here would be formic.values.whatever is in here and also um notice how we're doing formic dots so basically this hook returns everything that we need to control these inputs so let's try this out this is types of random stuff oh yeah and on the form we're gonna want to do on submit equals formic dot handle submit so let's try this and as you can see is working fine and it's going to reset our form so this is a pretty basic controlled form but what if we want to add some validation some client-side validation to this form so let's say that we you know we want these these things to be required we don't want them to just submit empty stuff and also we want to add a requirement that the username can let's say be it has to be at least six characters and we can do that pretty easily using yup yup is a library and formic formic implements the up really easily so we can literally just go here and first we gotta import yup and this is how you import yup you do import star as yup from yep and that's how they do it on their documentation so that's how we're gonna do it literally all you gotta pass in the hook is validation schema and this is going to be up dot object and this object is going to hold our username and our username is going to be up dot string and then we want it to be a required and then if they submit it so basically like if this um if this constraint is not followed it's gonna return an error and this is going to be the error message whatever we put in here so we're going to put username required and also we want to make sure that's a minimum of six characters and if they if they um submit the form and it doesn't follow this constraint we're going to want to give them the error message of username is too short so let's do the same thing for password let's go in here and just change this to password so in order to actually show these errors we're going to want to go down here and basically formic gives us it returns an error object and it contains these error messages right so let's go over here and we're going to want to display a form error message and this form error message is going to have formic dot errors dot username and we're going to want to do the same thing for our password right but um with trucker ui in order to show this error message we want to go into the form control and we want is invalid to be true if um there's an error message in our password or username perfect so let's try submitting this form as you can see here gives us an error right away but if you if you noticed um when we were still typing the username it already gave us an error for the password so formic also returns us an object called touched and we hook that into our inputs and basically it prevents this from happening so how it does that is it hooks into the on blur event of the input and so on the on blur we want to do formic dot handle blur and now to invalidate it we want to check that there is an error message but also um the user has actually touched this input so it's not going to show up if they haven't even finished inputting the form so now let's try it again as you can see here is working as intended and everything's working fine so you could really stop here and from this point forward we're just going to work on making our code more reusable and portable so as you can see we have kind of a pattern here like on change value on blur and it's kind of redundant so luckily formic has already thought of this and they have a hook that we can use and we can and it automatically does the on change value and on blur so we can get rid of these things right here and we can just use formic dot get field props and pass in the name of our input and i wanted to structure that and this basically does um the on change on blur and value for us so we don't have to do it as you can see everything works as intended i forgot to change this to password but yeah it still works as intended perfect and however we're still kind of redundant because we're just we're literally using first of all we're using kind of like the same format except instead of username says password but not only that in both of these inputs we're passing formig.field props so there is an arguably better way of doing this whole thing and that's instead of using a hook formic provides us with a component called formic and this form uh this format component basically uh it calls the use formic hook under the hood and saves that into a context and so it kind of looks like this right and as it passes down the context to his children so basically if it's child is a function it passes it down as arguments and basically it takes a render prop as a child so let's replace this hook with the um the component and because of that we're going to be able to make all this arguably better and more portable you'll see how and by the end of this video we're going to make some big improvements to this whole thing so let's wrap our component let's make it a child of the formic component so like i said it takes a render prop and the render prop returns whatever this hook returns and under the hood now in the format component it takes in these things as props so instead of passing an object we'll just do initial values equal and then that would be username and password and also the validation schema let me just pass all these props in real quick okay we can just get rid of this hook completely so as you can see here our form works exactly the same as before see and everything works the same but now um instead of doing the get field props now we can use another component that formic provides which is the field component which is arguably better than what we had before so we could use the field component and it takes an as prop basically we'll pass in the tracker ui input and so what field does is it detects if it's parent is a format component and if it is it gets the context of the used form of cook whatever formic saved in the context it gets that information and automatically passes down these props using that so here our applic our form is still working in the exact same way everything's working fine but we can take this a step further so as you can see here and let me close um the explorer so as you can see here um we have a form control right and we have one here too and they're really really similar so we could take this step further and just literally make a component right so let's go over here and let's just make a text field.jsx and so we can bring all of this into our text field component and let's make sure we got all this all these imports and so we can take it as props we can take in a label and let's destructure the rest of the props and so formic preserve provides us with a hook very useful hook and it's going to be called the use field hook and it returns um the field data and a meta like the meta which contains the errors and the touch of that specific field or input so let's use that hook and we're going to pass it in the props and the props should contain the name and uses the name of the input and to get it all so here we would do meta dot error singular because you know every every field has their own meta meta variable with its own touched and all that stuff and here we just want to spread the field props which is like on blur on change value stuff like that and we want to pass the actual props that we pass in in here we want to just render the label and now we have a reusable component so let's go over here and actually render that so text field and we can give it a name of password type of password and we can do the same thing here and let's give it some placeholder text as well so now we have basically the same thing but look how hum by how much we shortened this component so now everything's the same but now we have reusable components that we can use so we can easily just add like another field and call it email and every all the functionality goes along with it and then over here all we would have to do is add an email prop and do yup dot string dot email and this validates that it's a valid email and then we do dot required and now we have usernames right and then see invalid email let's just do this and it's still invalid because we need a dot-com at the end so as you as you can see here um formic makes it really easy to do all this stuff and in only like 32 like 50 lines of code we did all that so yeah i hope um this helps you do some forms with chalker ui and formic and thanks for watching i'll see you next time

Channel: Lester Fernandez

Views: 6,891

Keywords: Lester Fernandez, lester, coding, programming, react, full, stack, code, web, javascript, end, formik, client-side, validarte, validation, easy, chakraui, chakra ui, forms, form, formik chakraui, chakraui formik, and, how, to, with, controlled, input, simple, fast, new, 2021, 2022, formik 2, yup, Yup, using, yup chakraui, yup formik chakraui, tutorial, formik2, formik chakra ui, chakra ui formik, chakra ui forms, chakraui forms, formik forms, formik 2 chakraui, react forms, forms in react, form react

Id: 4j6QiEbBoS0

Length: 17min 14sec (1034 seconds)

Published: Mon Nov 22 2021