Formik: React Forms Tutorial with Yup and Material

hello YouTube my name is Bruno and today we are going to talk about react forms formik by the end of our tutorial we will achieve this form you see on the screen with this form we can create a new bank account in an investment bank and there are some validation here for example if you select high investment risk and you try to submit you see immediately that the comment is mandatory but if you select medium for example and you try to submit there is no error for that comment field this is called cross validation and we will do all of that in this tutorial in order for us to use for meek we need to import formik from formik and then is it also on top of them we can use form like this or use the form component provided by formik and that's what we are going to use we will import form and form it to start this tutorial as we saw in the formik documentation I already imported form and formik the next step is to start to use formik and in order to use formik we need to pass initial values to it which we will declare outside and we also need to pass an on submit function that for now we can just pass an empty function in the future we will come back to it the second step that we will need is to grab the context from formik and at this stage we are distracting the context and grabbing values alone from it so inside we will declare and use our form at this stage we should be able to go to our readme copy these initial values define their and just pass them here now we shouldn't have any errors after them we can just use a trick that I use a lot of the times when I use with formik to see the current values of my form this is probably the easiest possible way for you to see the current state of your form you are printing all the values and you are formatting them with 4 spaces which is nice for Ajay and file so if we come here we will see that at the moment our form holds the following values full name investment risk comments about investment risk dependence and acceptin terms and conditions with those values by default the next step is for us to start to use fields and in order to use the field we need to pass the name of that field and those names are the names that we gave as the initial values so as the first one we will use full name and we also need to import this from forming yes code is not helping us but we can come here put field save and after we save we can go to our browser and say hello world and as you can see even with the typo but as you can see the full name is here and it was updated which means that our initial setup was correct we can keep going and we can go to the second field and the second field we have is the initial investment and this field is slightly different compared to the first one because we want the initial investment to be a number we don't want someone to just go there and type a character so we probably can do something at the third stage of this tutorial but we can also do something now that will help people for example in mobile phones so when you go to a website and they have immediately the numbers from 0 to 9 it's because they are using a value type of number oh not very sorry type of number and if we go back to our browser we will see that the browser recognizes this is a number and allows us to have those and in mobile it looks much better than having a normal text field even though we can validate afterwards but it's a nice touch to give the user a number input field the 3rd stage here is our investment risk and the investment risk are 3 check and we have high risk medium risk and low risk in order to do a checkbox in this field we need to pass the value of the field we want and for the first checkbox the value will be high and now the last thing we need to say is that the type of this input field is of type checkbox' right we can copy these three times do one with medium and do one with low saving that and opening our browser we will have the three checkboxes even though we don't have any labels it's probably our next step is to add labels to it because now when we click we can immediately see that we received a high we also have here and medium and the last one is a low so it's working pretty well at the moment so the next the next field that we are going to import is the well not import that we are going to use is the component about investment risk comment about investment risk so we can come here inside comment about an investment risk and that one is slightly different than a check box because when we say pipe equals two check box we are passing that type to an input itself but in this stage the text area is a text area itself is a different component and for me with the field allows us to pass as and this else will render the component we put here and all the other parameters we pass here if we do parameters equals to one these parameters will be passed to that text area okay so at this stage we are rendering this text area and we are connecting this text area to the comment about investment risk which is pretty good so if we type hello world the funny thing is that we can go to the next line we can type something else we can go to the next line and as you can see every time we go to the next time we have the /n as you would expect the last well not the last we still have the accepted terms we have now dependent so let's do the dependent the dependence is different from all of these fields because it will be a drop-down or a select whatever you want to call it so in order to do a drop-down farm ik will allow us to do sois well roughly the same thing we did with the text area but this time we do a select and if you ever worked with a select you know that a select receive some values inside oops not select I was speaking about select and I type select it will receive options and those options for us it will be from 0 to 5 if I'm not mistaken let me just confirm here in my readme I think we typed them up to 5 to do yes 0 to 5 dependence so we can just copy place those be 2 3 4 5 I will just speed the video for you ok so now we have all the options from 0 to 5 and as you can see we used exactly the same trick we used for the text area we are passing has select oops we have a problem here I'm still passing the previous name so let's come copy dependence and if you see I always copy-paste these values because sometimes if you have instead of comment if you have three M's it will be really really really hard for you to pick up those problems so copy/paste think sometimes is our friend opening our browser we can see that now the dependence go from 0 to 3 and we can zero to 5 and selecting 3 chose 3 over here ok and you probably are noticing that we pass 3 as a number here we pass 3 as a number but in our browser the options are being recognized as a tree in quotes and this is not a problem of farming itself this is the implementation of all the browsers that you will use they implement the options that you pass they are strings and when we start to use in the second part of this tutorial material you I you will see that materially why behind the scenes takes care of the numbers and when we see the dependence on the form we will have the real number 3 we will not if this we will not have the string 3 we will have the real number 3 so the last field that we have to do for this part of the tutorial is the accepted terms and conditions and the acceptance terms and conditions is another checkbox and we just need to come here copy this value or this name sorry and this checkbox because it's not multiple checkboxes it doesn't have a value this checkbox is only true or false so it's either checked or not checked the others are an array of checkboxes so each one of them they need to have a value for when you click to be added to the array in this case we don't have that property sent anymore so let's try this hello bye oops by the way it accepted thee because of the exponential okay because you can have explanation of 5 or 10 exponential five and if you see it immediately changes the value here okay because this is a valid notation for numbers to have an exponential so the next is to click here we will receive high medium and low now we say on text area it's working we can put dependence as five dependence for example even though it's still the same but it's working and the last input field we have is the checkbox to say if the user accepts the terms and conditions or not so the first part of our two toriel is finished now we can even refresh this browser and start to think how we want it to look with material in order to use material we will use the same technique we used for s text area and has select but this time we will pass a material component which is the text field and if you also remember what I said before any single property that we put here we will pass to the text field itself and knowing that the text field in material supports a full name we can pass that label and that label will be passed to this text field so when we go back to our browser let's just confirm that we imported it yes we did import we already have our full name and we can say in the world and there we go our full name is working with material we can apply exactly the same formula to our second field just keeping the type equals to number and changing these two investment type sorry not investment type initial investment initial investment we can save go back to our browser wait for the refresh and now we can try to type some letters it still doesn't work but one two three four works we can still use this trick so everything is working as before the next step are those checkboxes but I will show you in a minute why I will not pick them right now and instead we are going to this text area and this select okay so we can do exactly the same thing here text field and now if I'm not mistaken it's multi-role multi-line I think is multi-line I think is multi-line we can even not moved in moved in line I think this is the the property in order for material yes it is okay I will just show you here in material you can come to the documentation in material and type text field and when you use the text field we call Devon it's good here we can do multi-line okay and clicking here you even have examples on how to do a multi-line if you want to go a bit deeper you can go to the text field API and the text field API tells you every single property you can use and I'm sure multi-line is so it's there by default it starts as false and then you can pass a values and you can also pass rows you can even pass a rows max I don't know that one so it will only grow up to that number of rows and in our case let's say that we will start with three and let's use that property rows max rows max because to ten rows okay so our text field with a multi-line is also working we can even come here just to double check and yes yet it is okay now coming back to our select our select if you see the text here in the text field here in material we can go to the text field and the text field also works with selects okay even though we have a different select here on the left but what we want is something like this and in order to work we need to pass a property select to it like that okay and so we will do exactly that at the moment we will come here and we will do text field text field select we will save but at this moment it will not look exactly as we expect okay so if we click here it still looks ugly it doesn't look like material and reason is quite simple material instead of using options in material we use something called menu item okay so let's do the same for these ones many whitened menu and once again Visual Studio is not importing so we can go manually and just I think that to our import now going back to our page after it refreshes we should be able to see a nice-looking material drop-down yeah this one we like so now going back to the check boxes and why I left them a bit behind if you come here you will see that the check box is in order to have labels they need a form control label okay and so I will just copy paste an example and show you why it will be a bit trickier copy here copy we don't need any of those properties okay so let's just import these and once again I will have to do it manually it to check what's going on with my vs code let's just import this checkbox as well and after we save let's just format this code and after we save we can go to our browser again and check that we have this secondary checkbox okay but now we can't pass these as his inside and as like B's like we can just come here and say has checkbox because then we will not have our label so in order to do that the easiest way is for us to create our custom component that will replace these fields okay and so in order to do that let's create a function and for now I will call it my checkbox because I'm not creative with names and so let's just return these and as an initial test let's just see if everything works so we can just do this but let's just see as an initial test if everything works our browser is refreshing so it's over there so it's working so now we can go to the formik documentation and you will see that we have something called for me we will have something called use field and use field is what we are going to use in order to grab the internals of that field okay now let's go to the documentation here and you will see that that use field will return a field and some metadata if I'm not mistaken let's just confirm in a second and yes we receive field metadata and some helpers I'm not even sure what those helpers are is to set values okay to set values and probably force validation okay but we can come here and use Const field matter we will not even use meta for now we don't need that so use field and in order to use field it needs to receive two things Atlee well one thing is mandatory which is the name we don't have yet we will put here as parameters but we need a name we need a type in this case it will be checkbox if we don't say that type it will assume text by default and the last thing is the value because some of our check boxes like these three they have a value okay so we need to inform for meek about those values this checkbox doesn't have a value so we will not need for that one but for the others we will need so let's just create an interface here call it my checkbox props extents checkbox props let's just see import this one just to have autocomplete we can come down here and say that one of the things we need is a name which will be a string the type already that we have directly okay and then we need a value and in our case it can be a string or a number probably we can have more things but for now I will say this is good enough okay so we can come here and say name or just props and we will just spread them it's just okay so my checkbox props let's just do props dot value and here we will do props dot name props dot nine it seems good we also need a libel which will be a string and we want it mandatory or not okay we can make this one option so if people don't want to pass a label they don't have to okay so let's say that the label will be in here table equals two props dot reliable okay and now we can pass the props here everything there and we can pass the field so having these now we are passing to our check box itself all the properties that we receive so every single property we pass we will pass down to our check box and on top of that we are passing our label to the form control label so we didn't import this one we need to import this one or that one and now when we have our my check box we should really give it another name but for now it's just good enough we can do this okay and we can remove that one we can say label equals two hi we already have the high over there and it's already working ok so let's apply to these other two and see how it will look like medium and we can even put something else safe risky for risky even though in a bank nobody would use this language but for our demo probably is good enough so saving this and going back to our browser we have our high medium and low we can click and things are still working okay so our oops I forgot to delete those too they are they were still there so now the last thing we need to do is to do our last checkbox as to our last checkbox which has the name of accept terms and conditions and we can finally available to our check box so accept terms and conditions we can delete these now let's just check if I put the value s option now it is optional because for this checkbox it needs to be optional and that's why having here Kling very busy missing type okay it's probably still compiling and now what's happening with my computer but it's super slow today so now we have the accept terms and conditions so we have all the fields with a material look and feel okay the next thing we need to do is to make the form look a bit nicer so let's just do a few touches before we pass the validation so the next thing we can do is to use I think it's for group it is for group let's see how it looks like inside the form group let's see let's put the others inside the form group and see so the last thing I will say we need here is a few spaces between all the forms so we can do that with the box for example I don't even know if it's the best approach but it will work at least so let's use a box and in box it receives if I'm not mistaken something called margin-bottom so let's put a box there and say margin bottle equals to two and by default because I didn't change anything in material every single of those units represent sight pixels okay so we put two it will represent sixteen and now we have a nice space so we can put this box in more places I'm a machine of copy-pasting today so putting box and box and it finishes here and give some spaces just to make it easier for our highs so this is what we have at the moment and I see you soon for part number three in order to use validation in farming we have two different ways the first way is for you to provide a validate function and if you do that you will have to do everything manually for example here we have a validation for an email field and as you can see it's quite big and now start to think that you will have the validation for three or five or six different fields it will become quite big even if you start to make smaller functions for each specific functionality it's quite hard and for that reason the farming developers they created what's called validation schema and validation schema behind the scenes is just kind of an open door or an open window for you to start to use loop if we go to do you website you is a really really simple library for validation at least in my opinion I really really like our simple it is for us to do things like a string to be required or a string to be of type email or a string to be of type URL it's really really easy it even has validations for dates for example if you need to so this is the preferred way that we are going to use for me today for the validation and so let's jump into a vs code and introduce the validation schema here okay and in order for us to use the validation schema we need to pass to this object but we what we know is the shape of our fields okay the fields that we want to validate if we don't want to validate a specific field we don't even need to put it here okay if you have like a free text that you don't care literally about that you just don't put here in the object okay so for us the first field that we have is full name and as you can see vs code already imported object from you so we can start to use string okay and we can import that because yes cuz we'll probably not so we have string required and we can say that the minimum characters is 2 I guess it's what we put in our readme but it doesn't really matter because you can see exactly what's happening is we have a minimum of two characters and maximum of 100 characters and that field is required okay so Avenue look into this we can probably do quite easily the initial investment it's a number it's required and we want at least 100 units of money okay so it's quite easy and before we go to the investment risk because it's slightly different the investment risk and the comment about investment risk because one of them is an array of options and the other one which is the comment about the investment risk is the only mandatory if investment risk is high so let's do the dependence and the accepted terms first because they are much much easier then we go back to our browser to see how it's looking at the moment and then we can come back to vs code in order to finish those two there are a bit trickier okay so let's do the dependence the dependence is really similar to the initial investment it's a number we want it to be required and it needs to be between 0 and 5 dependents quite easy as well right then they accept the terms and conditions it's kind of the same but this time is a boolean okay we want it to be required even though we probably don't need to say require it because it will be false by default and we just want to have it as a as a true but let's let's remove the required let's just say one off true okay now let's import to you number that's already there and boolean okay so we already have number and boolean imported we can save these and the last thing we will need before we go back to our browser is a way to show the errors because at the moment if we go to our browser you will not see anything so let's just grab those errors go back to to the end of our page and let's say free oops lower case but I know work is free and we will say Jason that I could just have copy pasted no and far so we have it now oops I need to close the parenthesis I should have just copied pasted it so we can just go now to our browser go back to our application and I think I have 3 R's good job Bruno and I don't have an hour over there ok in doubt we can always come here copy based and save okay going back to our page you will see that by default we have no errors whatsoever okay but if we start to touch every single field now we have all the errors over here okay because we interacted with the form already so now we have errors okay even though we are not showing the error is yet close to the field we will do that after a bit so for the moment we can see all the errors of the fields that we already validated we already have the phone I am saying Oh full name is a required field and this is another nice advantage of using loop is all these messages as you can see they come out of the box obviously you can come here and give your own messages for example we can say required and say your name is mandatory for example and we put three exclamation marks for some reason going back to our browser we can see that if we touch we get out now it's our own validation okay so it's our own message for the validation but to be honest most of the messages that you provides to us are good enough okay so most of the times you probably will not need to be passing your own messages even though you can it's a possibility coming here we can see that we already have those errors and the only two fields that we have left are these two so the check box is when we click hi we want this field to be mandatory and at the moment we have no validation whatsoever for those two so let's start by the check boxes and the check boxes will be slightly different than all of the ones that we already did because the check boxes which is the investment risk is an array okay let's just make sure that we import it into EU to avoid errors in the future and these are right is an array of strings okay if this was an array of objects okay so if inside this array you add multiple objects like two input fields instead of a checkbox for example you will pass instead of a string object and then inside this object you will do what we did inside this object so having your own field in our case it's only a string so let's rename this again to string and we can even be specific and say one of high medium and low okay so we want one of those and we can say that the minimum amount of checkbox is clicked is one okay so here inside we are saying that it's an array of strings and each string can only have one of those three values high medium and low and when we select those checkboxes we need at least one selected that's what we are saying in this line okay so if we go back to our browser I think I saved already so if we go back to our browser you will see that clicking in any field leaving now we have the investment risk and in the investment risk it says investment risk field must have at least one item so if we select one item now that our disappeared which is exactly what we wanted let's just do a small trick here so we are saying that we want one of high medium and low so what happens if I come here and I say very low for example okay if I say very low and we go back you will see that now I have a new checkbox but clicking there look what happens we have investment risk and it says that the first position of our array okay which in this case is very low and you can see here is the first position of our array okay that's why it's zero must be one of the following values high medium and low and we are passing very low so it's a no no it's a really really useful feature and quite easy to do if you do it manually with validate is a bit harder doable but a bit harder so the last field we have is probably the most complex of those let's make it so in order to start this one this one we have mixed conditions here we have a condition if the checkbox high is selected then the field is a string required it has min characters of 20 and max characters of 100 if the high checkbox is not selected we have exactly the same relation except that the field is not required so if the user doesn't type anything it's still a valid field in order to do that you provides a sweet mixed and mixed as a lot it's already important mixed up adds a lot of useful tips here you can say a lot of things but the one we are interesting interested now is to say okay when this field which is investment risk and then we pass an object this object has three things inside his which is the value for now let's keep it leave it there and when that value is true so when that condition his happens then we will pass this validation which is string required mean of 20 and max of 100 okay otherwise so when the initial condition doesn't happen we have a string of min 20 max 100 okay so the last bit we want here is what is this his okay you are probably tempted to say okay I do this I go away everything is fine no actually it isn't fine because this is will receive the value of that investment risk okay and the the the value of that investment risk and yes vs code is right we are copying the wrong one so it was already a replicated field and what we are going to receive ear will be an array of the option selected for example let's just refresh the page it's not there yet but saved probably now it will be there yes so if you come here and if you see the values when we click here in reality this investment risk is an array so when we are using is we will receive data right and in this case we will receive an array with high and medium so in reality what we have to do is this is a function ok so we can do the following we will receive investment risk investment risk which is an array and this his support spot you passing direct value like a number or a string or it passes you a function and you need to return true or false ok so in this case let's say that investment risk will be an array so if you want you can even cite these being array ok and then what are you going to return oops we can say investment risk dot find because we want to find inside the array of the investment risks one that is I write if you don't understand what's in this line we are literally going to every single position as as soon as we find one that matches and in our case the one that matches hi when that happens find will return that element and his only cares that that element is a true T value so if we are returning a string with some value it will be a true T value so we will go to the first condition then okay so going back to our browser if we select medium you see that the comment is not even here but if we now select hi the comment about investment risk is here saying that it is I'm a required field okay so you can say our world a lot of characters just to disappear so now we have probably more than 20 so it disappeared the error we can do this we can come here select one we already select those 125 the full name again my name so everything looks fine there is no errors whatsoever so in order to then show the errors close to your fields okay you can come here and do the following we already have errors right so we can also get something called touched and touched letters now if that field was already touched or not so if you are ready interacted with that field or not yet and that's important so let's use touched dot full name okay and if full name was touched we want to check out with full name as errors if yes we will just say errors that full 9 otherwise we say no so going back now to our component you will see that the full name now if we do just these ok and we leave the field so stop we interacted with it and we left the field okay so after the first onblur we will have the full name must be at least two characters oh this is cool so now we can start to type and do things like and it starts to say and changes the messages ends close to you it's not here at the bottom so we can do that for every single field we have but this is hard to do right so the developers of farming created something quite nice for us so we can do just this full name here and so with this we can completely remove all of that and this one is already taking care of untouched or not so if your field was not touched yet you will have no messages if it was touched you will have messages did we import it yes we import it to the wrong place now it's here alright so you will have all the message you want so we can just do this come here and say this one is the initial investment prop it buys this one and this one just for fun let's make it here at the bottom and say the name is investment risk let's copy again let's put it here I'm at about investment risk copy these one again once more we copy this one and probably this will be our last copy paste copy paste here okay so let's just check if everything here makes sense I think it does we still have this touched we can remove it's not being used anymore let's just see for our values make sense yeah this is them we can start even with zero this one we don't have anything their comment about investment risk is empty dependent okay so we can go back here we have still a warning but that's a different one that's the material drop-down okay let's go to the drop-down and literally it's complaining that we need a minus one because our default value is minus one so let's just pass a select for now there are much better ways to solve this issue so we have no errors there which is good let's just see if when we submit we have all these errors so let's try something like ISD one two three four super risk failure copy-paste select zero dependence that so we have nothing so the last bit now that we need is our submit and if you remember on I think the first lesson I told you that we will look into wait after and for now we will not care about that bits right I said something like that so now we can just receive values and a for me CalPERS okay the values are the current values of your form so let's pass values and console that log of CalPERS for me CalPERS I think that's what I called it thermic helpers and just is just to differentiate every time we print it so if we go back to our browser and we try to submit we have all the errors and one really nice feature at least that I really like is the fact that when you submit in for me if the form is not valid nothing is going true you're on submit so you're on submit is safe for you to put code directly you don't need to do validation again even on submit you just need to have urine submit and you are sure that it will only be cold when all your form is in a perfect state okay so we can say whew a lot of money now okay comment let's put a comment up to 20 characters let's put saying that I have a dependent and now when we submit you will see that we have the full name over there we have the initial investment we have everything that we typed in our form so this form is now ready for you to pick it up and send to your server or somewhere else you want to send your form okay so this is a really really easy way to do forms the last bit that you probably want to know is while you are doing the post to your server okay or whatever method you are using for your server when you are doing that for meek as also a value here called is this gamma is submitting okay and this value is submitting is usually something that I use to disable my button okay so I usually come here and as I disabled is submitting so now my button while my firm is submitting is disabled you just have one small trick for that one is when you are submitting something you need to return a promise to farm it okay so for example we can return new promise we say the accept of the promise okay and we can do set the amount of a CC and let's say if I second is a good time out or let's even do a piece let's do this put this inside okay and after these we say ACC okay I didn't do anything stupid which seems I probably did because V s code is complaining oh yes vs code you have all the right to complain now it's fine okay so now I'm returning your promise that will be resolved okay I say ACC I don't even know usually I call it resolve the river rejected I don't know why I call the ACC's now so now we are returning this promise and this promise will be resolved after five seconds so if we go back to our browser and now we make the form valid again let's make the form valid again let's just make a comment let's just select a dependent and now you will see that my button is disabled for the next five seconds or whatever time your server takes to submit okay and now I have everything here so when your server is submitting you can use these this is submitting value in order to disable your button you can use it to disable some specific fields if you want to you have a lot of properties here of everything that is happening and other properties if something is validating okay so while farm it is validating if you have any a think validators or something like that or one of the validators you have is really slow this is validating can be useful for you to not allow people to also submit your form you can have something like this for example what is it it here or is validating okay so every time something is happening in your form you can disable your submit button is usually a good practice for you to do if you want you can even make this a component of its own so you don't need to put this in every single form and the last bit that you can do I will not do here but that you can do is to pick up this field and do something really similar to we did with the checkboxes and if you see the documentation from formik the second parameter let's show you the second parameter in the use field is a matter and that matter will allow you to get the touched and the meta error okay so with then you can then come to the material UI website and in material your text field will receive will receive an error and an hour per text let me just confirm that component just to not lie to you but I think that's it so error yes let's check let's check I think yes it receives an error and an upper text okay so if you pass to the component and now per text and an error then everywhere you can just have my input field or my text field whatever you want to call your input field and every time you use it you will have for free validation you will have the messages for free and so it's quite powerful what you can do on top of this small lesson that we got today so I hope you enjoyed it I hope you join me for the next ones and see you roughly in a week's time bye bye

Channel: Bruno Antunes

Views: 19,643

Keywords: formik, react, typescript, yup, forms, material, material-ui, frontend, javascript, validation, tutorial, react for begginers, react for beginners, form validation, forms react, react forms, forms in react, react form validation, react.js forms, forms react.js, forms in react.js, formik react.js, formik react, react formik, react.js formik, react js formik, formik yup, forms with material-ui, react forms material-ui, formik tutorial

Id: kYyaJyTLjpk

Length: 52min 12sec (3132 seconds)

Published: Mon Feb 03 2020