THE ULTIMATE REACT-HOOK-FORM CHALLENGE - ALL THE FEATURES IN ONE FORM
Vložit
- čas přidán 18. 08. 2020
- 📘New Course: Build full-stack React Typescript applications tsreact.maksimivanov.com/s/ytd
In this video we'll build the dreadful form with all the complex features using the react-hook-form package. The form features will include:
- multi-step / wizard form
- form field validation on blur ( using yup )
- form field masking / normalisation
- dependent form fields
- custom form inputs
- using react-hook-form with material-ui
- file uploads using the dropzone ( using the react dropzone )
React-hook-form wizard with Redux: • Multi Step Wizard Form...
🐦 Twitter: / ivanov_dev
I write about React and TypeScript there
Code: github.com/satansdeer/completed
My Discord: / discord
My Book: www.newline.co/fullstack-reac...
Follow me on Odysee: odysee.com/$/invite/@stepbyst...
Maksim, you have saved us hours upon hours of documentation researching. I've only watched 2 of your videos and I feel like I can take on anything. This is brilliant!
😊 Thank you, that's really motivating
Maksim this is the best thing i could have asked for!!
😁
Thanks Max, great as always!
you almost saved my 4 story points and uncounted hours of going through documentation. This was awesome!.
Fantastic video! Such an elegant and clean approach, thanks for another awesome video!
I’d love to see an implementation of RHF’s field arrays with custom validation between each field (i.e. sum of numbers of an item in each field must add up to 100 or something similar)
Thanks again!
Great video Maksim, really useful, thanks!
thanks a lot! this is really helpful for beginners)) thanks for lots of explanations and not just code alone!
Holy!!!!!!
Maksim, That was....... JUST WOW!!
I am kind of a beginner in the whole field and I started learning React a while ago.
Imma tell you that, This was one of the most informative videos I've found.
Your pace is quick tho... At least for a beginner like me, I was first introduced to most of the modules you used so I had to stop a lot now and then to do casual console logging to know what exactly is happening.
Overall this was insanely useful and thanks for your time.
Keep up the awesome work!!!
Solved one of my React form problems within 9 minutes of watching this video- bravo!
This is amazing! Ready to hit an interview next week, thanks Theon Greyjoy ❤️
Good luck with the interview
Very nice tutorial. Simples and concise. Thank you
Love your videos. Thanks to you now I understand react-hook-forms
Thank you for bringing this to us 🙏👍🏼
Мдааа... Это я удачно зашёл. Очень захотелось переписать свои формы на проекте с redux-form на этот набор. Спасибо за урок, Макс!
Рад стараться)
Похвальное решение)
very helpful - great work, thanks
Thank you so much ! liked and subscribed !
Hey Max, 2 things, 1: love your videos! 2: when a set of videos about recoil from 0 to Hero? Keep up the good content!
Great video really appreciate it. Could you maybe be a video using like the Star Wars api to search/ filter a person and when the person is selected it fills in other form fields like height, hair color etc.
Thank you for sharing, this lesson helps me a lot !!! from VietNam with love
Glad to help!
Oh my goodness. I was checking to see if i could find one of your latest videos so that i could suggest you doing a multi step form then I found this. Damn you are a gene. Would be great to see you connect then with an api using axios. Thanks a Bunch Maksim.
kefa mutuma here I used just regular fetch, and tbh I rarely use axis these days
@@satansdeer1 and best thing you did is use functional components and not class based like most tutorials. I'll be making a blog on this soon and i'll be sure to give you most of the credits.
kefa mutuma thanks man
very inspiring, look forward to the next video, thanks
Thanks
@@satansdeer1 request for editing that result form, use auto suggestion/autocomplete with modal, redux/context, thanks
Thanks for sharing. 👍
really ultimate❤️❤️
Great job! ...
I struggled with loading form data with an ajax(i used fetch as well) call. Because I didn't do it correctly the fields were readonly. But thanks for this video. I am studying it like it was a college course. I was able to get it to work but it took longer than I wanted it to.
nice tutorial many thank
thank you so much you saved my time broo
Love your videos bro!
Some corrections for Material UI and React Hook Form V7, may 2021:
import { yupResolver } from '@hookform/resolvers/yup';
const { register, handleSubmit, formState: { errors }, } = useForm(....);
ref={register} name="firstName" -> {...register('firstName')}
;
(...
Very well presented , Covers major forms features . Thank you. Do you have any example of dependent drop down ? Country , State , City ..
this was very informative and fast paced thank you. in vscode how do you fix typos on the fly?
Thanks, Maksim! Great Video! Can you please tell us what vs code theme did you use in the video?
Thank you this
Notes for the Above video:-
NPM Packages ⚛️⚛️⚛️
1) npm i react-router-dom
2) npm i react-hook-form
3) npm i @material-ui/icons
4) npm i @material-ui/core
5) npm install material-ui
6) npm i libphonenumber-js
7) npm i yup
8) npm i @hookform/resolvers
9) npm i react-confetti
we can install whole packages in a single line using a space separator
npm i react-router-dom react-hook-form @material-ui/icons @material-ui/core material-ui libphonenumber-js yup @hookform/resolvers react-confetti
Thanks for the great comment!
my npm i @hookform/resolvers is not working, it is showing me 'yupResolver' is not exported from '@hookform/resolvers' error. Any help ??
@@ritu06das try importing yupResolver from "@hookform/resolvers/yup"
as in import { yupResolver } from "@hookform/resolvers/yup"
Thank you for this comment!
Thank you for your instructions. Could you please let me know how to add material ui select with react hook form.
So good.
I have a question about dependent form fields in step 2. As per the implementation we are hiding the field to the user but when a user submits the hidden field is taken into account as well which is incorrect. What solutions would you suggest? To unregister the field?
awesome video, could you please provide example for react-select validation with react-hook-form
Maksim,
Please make a video where we can use a table, with CRUD operations using Material UI.
Also tell which Table component is best for React :)
It's now
import { yupResolver } from '@hookform/resolvers/yup';
can u please upload a video for CRUD operation using axios ; after creating a from using react-hook-form ?
Maksim, i really need your help in creating a simple example using react hook forms, material ui stepper, yup validations along with data storage in redux to show data when moved back and forth. It is really getting very tough for me.
Great content, I realize it was a lot of information to do in a short amount of time but if you could go just a little slower it would be perfect. Thanks again.
just reduce the playback speed in youtube settings.
Hi maksim, ur video is awesome have done any video on useFieldArray??? I m facing a problem with checkbox in it.
Hey man, well done for sharing this great content. A bit of observation here. Maybe you should consider switching the camera from the bottom-right when typing towards the area. Like I don't get the dependency you installed immediately after the libphonenumber-js. It was literarily behind the section of your head. Pardon me for lack of better words. Again, great content here. I have subscribed to your channel.
I have problems implementing Edit Mode on a form using React Hook Form,
I have a create form where you can add extra inputs using useFieldArray , and if I wanna make a Edit mode where the fields are populated with the data from Redux. I have problems adding and deleting inputs using useFieldArray and using setValue to populate them.
I see, ok that's a good candidate for a video
What do you think about sharing data bettween screens using a parent component and passing to child by props? this can be done with nesting in react-router
Do you have any tutorial for saving form schema as JSON and storing it in db and loading form from schema than writing all form HTML code? I am looking for form builder option and serve the form from schema we built.
Been fiddling with my forms today while trying to use react-hook-form ,and I got stuck somewhere.
It’s a login form, if authentication fails I display a general message at the top of a form “invalid credentials “ trying not to expose as which field is wrong, entered values persist as usual.
And when a user sees the error and try to enter new values the error message should disappear.
Now to make that error disappear is where I got stuck.
Before this package I was using normal useState and useEffect would clear the error when field value changes.
Any advice on how I can watch those values before submitting the form?
sorry, i want to ask how can i set the uploadfile is optional? i set the required:false, but seems if i didnt upload the file, the submit wont work~
Probably the best form tutorial. Thanks!
Nice 👍. Can you show react hooks with redux crud (get,post, edit, delete) using api (axios)?
E.g axios get/post/edit/delete with react hooks redux
Hi, I haven't learn about nodejs and expressjs so I don't understand why the server.js didn't run although I have put the exact script and devDepedencies? in the console said connection refused to the localhost:4000 which mean that this server.js not running? How can I fix it so the server.js also running with the react?
Amazing Tutorial! - So much information so fluently imparted in so short a time. Thanks, Maksim
{2022-02-24}
How to use Controller to display multiple values on Material UI Table using axios
Could you please share a simple example of how to preview a file before form submit using React-hook-form and controller and also submit the form to axios with multipart/form-data header. One preview and submit using react-hook-form and its controller. Thank you in advance.
if anyone runs into the error of being unable to resolve @hookform/resolvers, install version 0.1.0 with npm i @hookform/resolvers@0.1.0
I am currently trying to use React-Hook-Forms and learning a lot about it in this channel... I am amazed no one has commented about the @hookform/resolvers version before you!
you saved my time! tq
This was helpful: github.com/react-hook-form/resolvers/releases/tag/v1.0.0-rc.1
@@joesef2398 thank you! worked
You can with the last version to import like this and it will work too
import { yupResolver } from '@hookform/resolvers/yup';
8:36 why do you pass register as ref? React Hook Forms documentation suggests to use spread operator { ...register('firstName') }
Very good, but difficult
hello i want to know, when we click the checkbox, the input box for phone number is show. when once you fill phone number after then, you uncheck the checkbox, still data is in the state, we got phone number in console, can u tell me why it heppens?
Can we have a video using react-hook-form v7 ?
I'm stuck trying to use react-hook-form with Imask and Material UI , can't make it work, any link that could help me please??
I'm getting TypeError: Cannot destructure property 'setValues' of 'Object(...)(...)' as it is undefined.
Datacontext.js ( React verion 17.0.1 ) any help
hey Maskin , can uh make full video for Edit Form (Prefill Data)Using React Hook Forms
Максим, прошу прощения что я пишу на русском, т.к. мне не хватает знания английского языка, но не могу удержаться и не спросить, а не хочешь ли повторить такой челлендж, но уже с TS-типизацией? не принимает почему-то children, и кроме как выставить any выхода больше нет, интересно было бы посмотреть как бы ты решил этот кейс :)
За твои видео огромное спасибо!
да, есть особенности при использования тс, хорошая идея сделать ULTIMATE FORM CHALLENGE TS EDITION
Make video on dynamic add/delete in input field in a table like layouts.
Maksim what extension are you using to format the document?
it's Prettier
How do i validate the phone number for it to be a number and not any other value.
18:50 why do you use prevData => { ...prevData, ...values } instead of using simply { ...data, ...values }?
Can you do this but on NextjS?
how to validate array input fields
can you teach how to include a Rich Text editor with react hook form plz
hii bro am from india make a video which on explaining each property of hook form please bro it will very help full for beginners
Please an example using AppBar, Tabs, TabPanel from Material UI
But if we want to validate the phone field validate then how we do in react hook form, any idea?
same way as with email field, you can combine masking and validation
@@satansdeer1 okay thanks. But if I want to use react input mask with react hook form then validation not working bcuz input mask doesn't take type or register not working without input type.then how we do can you make video for it?
What's the name of the theme you use?
I wish these were all the features. Related dropdown select re render is the part most of the developer get stuck.
Bro and the Server video?
could please add radio button group, checkbox, select ,password, datepicker to the form.
you missed how to validate dates, since yup only accepts MM-dd-yyyy format
Great video Maksim!! But I am getting yupResolver error . Can anyone help me how to fix this
Hard to tell what is wrong without seeing it. Mind sharing a codesandbox?
@@satansdeer1sorry for late reply. I have resolved that issue. For me I have imported '@hookform/resolvers/yup' , for me only '@hookform/resolvers' is not working, I don't know why. Anyways it worked and thanks
0:57 *first name should not contain numbers
Elon's son : Why DAD? Whyyyyyy..?
ahahahaha
I think i found it!
@Maksim, What is the point from creating these advanced forms if the filled-in input data is saved in a JSON format? Is there any way you can mail these with REACT-HOOK-FORMS?
20:27 -> how to store the data in a state.
Disabled the button on error please.
3:15
🤐😛
Максим сделай видео и руские и английские
Пожалуйста🙃
Haven't watched it yet, kind of was frustrated by the formik, I tried making a group of fields and checkboxes and formilk didn't validate them propertly, also, formik failed in conditional rendering. I hope that react-hooks-forms are better at this than formik. Does your tutorial include managing a group of checkboxes or radio buttons? I'm asking because validating and working in textFields is a breeze, but the checkboxes and checkbox groups give me a headache. Also, why do you pronounce Yup as in mute - when it should be pronunced as Yup as in cup!)
it is super.
but not for beginner.
:/
Is it a tutorial about React-hook-form or this monstrous MaterialUI? I got annoyed and stopped watching...
this video is not valid in 2022. in every step you will get headache . this video should update or removed. everything shown in this video is deprecated. and everything now more easier. then shown in this video please remove this video
the gist is still the same, you just need to update the way you call the things