Formik tutorial, simple forms in react

okay guys so welcome back again so in this video let's do a quick tutorial on handling forms using formic and react so for this video what i've done is this that i've created a very basic react application using npx create react app that is using the create react app package i have created this react application and i have made this very simple ui that has only two input fields that is the name and the email of the user or whatever it is and then if we have a look at the package.json file we have two dependencies here formic that would be used to handle forms inside react and then we have one more dependency that i have installed doing in pmi formic and npm iap and this is basically for validation of the fields inside the form so this is the library i'm using that is called yep and it it and whenever you are using formic i would suggest you to use here for the field validations because like they are like brother in arms so for this video again what i've done is this that inside the app.js component i am simply rendering out this simple form component that is the simple form here this one here let me minimize the sidebar here because i do not need this anymore and one thing more before going ahead i started the application by doing npm start so that i am seeing this page here and inside this simpleform.js file i have a very simple functional component here called simple form and then i have a function here called handle summit uh currently it's it takes in an event here and we are simply preventing the default behavior of the form here and then inside here and these class names are only for styling purposes the styles which you see here and these styles come from this file here that is all the styles are present inside index.css files so if you if you are going to use the same styling you can copy the css files from my repository here and now let me close this and let me close also the package.json file so now here inside the container we have our div with the class name of form and then inside that div we have a form here a very simple form here with the the heading here that says formic tutorial and then we have two form controls here or form fields here that is for the name itself and and for the email itself and and i've had coded the error message here that his name is required and here i've also hard coded the message here that is email is required so we are going to conditionally show this error messages dependent on whether the fields are valid or not and then we simply have the submit button and we have the reset button so if we click on reset we see that everything is resetted here and it is like the default behavior if you create a button inside a form with a type of reset it resets the form but all this we will be doing using formic so now to convert this form into a formic form what we need to do we need to import two things from formic that is the form component and there are a couple of ways you can use formic using the form a hook also that is a used formic form but what i am going to show you is this that this is the way you are going to use formic in 99 of the cases and i suppose that this is the easiest way to use formic so we need to import two things from forming that is formic comma form from formic like this and then we need to import uh everything from here so import all as yep yep from yep that is for the field validations so firstly what i am going to do i am going to comment out this handle summit function from here and here what i'm going to do i need a couple of things so we need three things here that is we need to handle the summation of the form that is if the form is valid we need to have a function that would get all the values from the form then we all we can also provide information the initial values of the form because like say suppose if this is an edit form inside your application then you want to prefill the values inside the name and email field then you can use the initial values thing so therefore we are going to provide the initial values also and then we want to have the validation schema also so firstly let's dive into the validation schema and the initial values so initially what do we want to have as our initial values for our form so let's say initial values equal to email because we eventually want to have the email of the user as well as we also want to have the name of the user like this so these are the initial values of the form which would be pre-filled inside this form which we see here and now we need to define the validation validation schema for these fields so we can say const validation schema equal to yup dot object object dot shape that is we are defining the shape of the final values that we want to get from this form so we can see we want to have a name field and we want to define a validation schema for this so we can say this should be up dot string that is the name should be in a string and it should be required here that is we always want to have the name field as required secondly we can target the email field here so we can again say yep dot string dot email that is email field should be a type of email and this should be again required so this is a very simple validation schema and you can do a lot more with your package to define like complex validation schemas but here i am keeping it very simple that is to have the initial values as in empty strings and the validation schema for both the fields are these two things here that is name is required and email should be an email as well as it should be required and then we want to create a function here so let me create a function here so function handle submit so handle submit that is what do we want to do when the form is submitted and here it takes in a couple of values but for now let's leave it as an empty uh let's keep it as an empty parameters here and with an empty body here so now let me remove this handle summit function from here and now we'll start using this formic components that is the formic and the form components that are imported from formic so the first thing which you need to do you need to wrap your form component that is this form uh or form html element that is this uh that starts with this thing here and ends with this thing here so you need to wrap this inside the form a component that we imported from formic so we can say formic like this and then we need to wrap this form html element inside formic here the second thing which you need to do you need to uh instead of using this form component or form html element directly what you can do you can simply use the form component here from formic because otherwise you need to put in these values here that is on summit on blur and so on and so forth so instead of doing all that what we can do we can simply remove this form html element and we can simply remove this on summit event handler here and we can simply provide in form here and we see that we have the ending brackets or in any tags as form here so this thing this is what you need to do and the last thing which you need to do is to provide some props to this form a component and that is it requires three props at least so initial values would be the initial values that we created so initial values then we need to provided the validation schema so either we can pro we have a couple of things that we can manually validate it but the best way to use formic is to use with yup that is to define a validation schema using yep and then use that as the validation schema for the form so i'm going to use this drop here that is validation schema would be this validation schema that we created that is this schema and then we need to have the on summit uh prop here that is what should be called when we submit the form so we should can we can say handle summit here like this so let's see if this so nothing changes here because we are not handling the fields inside the form here but uh we can we see that if we if we write something here we do not see anything so basically this handle submit when we use it as the on summit event handler takes in two things here that is the values and the actions or for help or we can say helpers instead of actions we can say helpers so these are the actual values that in that you can use to post it to your backend server or you can do the uh you can do whatever you want to do with the actual form values so for now let me simply log it here so console.log values like this so if i save it nothing changes here because we see that we are not getting those values here so what we can do we need to target these input la these individual form fields here that is this input element with a type of text and id of name and this input element with the type of text and id of email so the basic thing you need to do when using formic and this form component is to provide a name to your individual input elements that should be referenced by these keys here that is name and email so since this is a name a name input element so we what we can do we can give this an html html thing here name called name and the same thing we can do it for the email here that is name would be equal to email like this and now we need to provide in three more things to this input element that is the current value so current value we can get uh from the formic props here or the formic render props here so before defining in the values what i would like to show you is this that instead of simply providing this form as a child component of this form a component we want to use the render props method so instead we do it like this what we can see we can use the render props thing here that is props like this and then we can simply return something from here and what we can return we can return this form element from here or form component from here so we can do it this way like this everything works well and now before doing anything let me simply log in the props here just to make you understand that what exactly am doing so if i do this thing here so if i save this we see that we get some values here so let me increase the size here so if i expand this we see that we have a couple of properties here inside this props object here that is the errors that is the errors here uh we should be having the values here so currently we see that the value is this thing here so let me increase the font size so we see that the name is an empty string email is an empty string and then we have the errors object here which we see here that is name is required email is required and then we have the handle blur and the handle chain and the handle reset so what we can do we can provide the value from this values uh values thing from this values thing here so what we can do inside this name input field what we can say we can say the current value of this field would be props uh props dot values dot name like this let me save it so it should like better format itself and the same thing we can do for the email thing that is the value should be props dot values dot name so if i save this we see that nothing changes here inside the form and now to make this thing work that is this input element work and to change the values as we type on because currently if i go here and if i type in something inside this name field we see that we are not able to type because we need to handle the handle on change event and the on blur event on this input field so what we can say we can do we can do it like this that is on change we can simply say props dot handle change and on blur on blur we can say props dot handle blur like this and the same thing we need to do for the email field itself so we can do it like this so if i save this everything should be working fine and just uh ignore this error messages because we would be handling them in a moment so let me clear up the console so if i type something here we see that we get the yeah we get the same thing here and inside the email field itself and it should be like the value of the email field should be values.email and not values.name so if i save this and if i reload the page we can type in the name here so let me type in truly metal and let me type in let's say yours truly at gmail.com so if i see at the very bottom here that is this from this log statement on line number 23 the props we see that we have the values here that is this is the values here that is the email here and the name here and if i see here the error object here we see that now we have an empty error object here but now let me reload the page and let me increase the size here so if i expand this expand this we see that currently the errors are empty whereas the values are also empty so if i simply submit it we see that now what we get we see that we get the error object prefilled here that says that name is a required field and email is a required field and the values are name is empty string and email is an empty string so if we simply provide in the name here and now if we have a look at the uh at the props object here on from line number 28 we can see that we have one error here that is email is required because name is there so only email is required and values our name is truly an email as an empty string so how do we show the color how do we show that error conditionally here so it is pretty simple to do so instead of rendering out like this that is directly what i can do i can render it out conditionally so we can see props dot errors so errors dot name and props dot touched dot name that is only show the errors if this field has been touched then only we want to show this thing here and instead of providing in the hard coded text here we can simply say props dot errors dot name simply like this so if we save this we see that now the error message is gone because it is going to be rendered conditionally so if i simply remove the name from here we see that now we get this message here that is name is a required field and as soon as i type it we see that the error message is gone and the same thing we can do for the email field so let me simply copy it from here and instead of this thing let me simply provide it this thing here and here instead of name i can simply change it to email like this and if i save it we see that email is a required field because this field has been touched so let me let me provide a valid email address so currently it is not a valid email address so if i do it this way we see that the error is gone so what i can do i can simply reload the page so currently we see that uh you know we see that name is an empty string and email is an empty string here and we do not see any error because we haven't touched the form yet so as soon as as i touch the uh touch the input element here called name and if i simply remove my focus from here so let me remove my focus from here we see that immediately we get this error message here that is name is a required field and that is why we have used this thing here that if we have touch this name field only then show the error message so now we get this error message and the same thing we can verify it for the email itself so i have touched the email field here and if i simply focus out from the email field we see that email is a required field so now let me simply put in the name here and for the email let me put in the valid email here and now we see that both the errors are gone and now if i simply press submit we see that from line number 17 so let's scroll to line number 17 we see that we have these values here that are like all sanitized and like validated values from your validation schema so we have these values here and if you want to show a loading spinner or something like that what you can do you can use the form.submitting prop and you can use this helpers from here so if i simply log the helpers here that is what all is coming inside this helpers so you can do much more with helpers here so if i simply submit it we see that this is coming from line number 18 that is the helpers here so here we have a couple of functions here that is to reset the form to manually set the errors to manually set the field value and so on and so forth and you can like have a look into detail about this um by going to the formic page but i'm not going to go into the details i just uh made a reference to it so this is all what is needed to this uh to use for me inside any of your application and let me fix this uh thing here that is stringify so here what i can do i can simply say props dot values so if i save this we see that this is the values here from this form as as we type here we see that we get the values here so now one more thing that i would like to focus upon is this that currently we see that in both the input elements that is this input element and this input element we are like repeating ourselves that instead of this name attribute which is different for both the input fields that is name is name and name is email here that is these two these two lines are different but these lines that is value on change and on blur value on change in on blur they are both similar inside these input elements so what we can do we can simplify our forms pretty much by using one more component from this formic package and that is the field component so i can simply import field from here and let me also import the error error message component from this formic thing so instead of providing an input like this what i can do i can simply replace this input with a field thing from here from formic that is the field component and here i need to simply provide in the name attribute i like this so if i save this everything should work fine so if i reload the page we see that we do not see an error if i focus out we see that we get an error here so this uh all you can write in simply one line here and moreover in the same way we imported this error message from here and we can see that the error messages currently has have the same like uh like same uh they are like they are both same for both the input elements only the thing that differs is the this thing here that is the value name or the value key so what we can do we can simply say error message like this and name would be name like this say same as before so if we save this we see that now we get this error message in black but we can style it according to our class name here called error so what we can do we can simply provide a class name called error like this so let's save this and now we see that we do not see this in color here so what more we can do we can simply provide it as a component here so component would be p and now we see that we get the error message in the same way as we were getting before and in the similar way we can use the thing inside the html input element for the email field so let me comment it out so we simply need to provide in the field here and we simply need to provide in the name value here and here we can provide in the name as email and the similar thing for the error message so let me copy the error message from here so let me copy it from here and let me paste it here and name this time would be email because we are referencing the email error and not the name not the this field error so now if i save this everything should work fine as before so if we do not provide the name we get the error so let me provide in the name so let me provide in the email so if i simply submit it we see that we are not able to submit it because email is required so if i provide in that email here we see that we can submit the form here so if i submitted the form we see that we get this message from line number 17. so guys this is like a basic overview of using formic inside any of your applications and i i've kept this tutorial very simple so that you can get started with forming because there is a lot more that you can do with formic and not only this much because there are like check boxes the radio buttons the select input so there are a couple of things but uh i've tried not to touch them because i wanted to keep this tutorial very simple for all those who want to start begin with formic so guys that's all about this video so if you like the video do it the like button and if you haven't subscribed to our channel do subscribe to our channel so thank you bye tada take care and have a good day and have a great day

Channel: Mafia Codes

Views: 2,894

Keywords: yourstruly, react formik, handle forms using formik, formik forms

Id: sdabpqs7B2Y

Length: 22min 37sec (1357 seconds)

Published: Tue Aug 16 2022