The best tutorial I have come accross for React-Hook-Form. No one else explained how the Controller works in enough detail to help me in my project. Thank you!
Thanks for the tutorial. I'm new to RHF but I used it with MUI recently and did not need the Controller component to register the inputs of the TextField MUI components, it worked exactly the same as if you were using native elements. However when I needed to register the value of a date picker the only solution was to bring in the Controller component.
Thank you so much for making this video! I'm a visual learner so just reading the documentation alone is a bit challenging for me. You answered all of my questions regarding this library as well as how to use it with Material UI. I owe you a beer, sir!
Thank you Bill! If you are the same as @Bluebill (have the same profile image) I thank you for all the community help and contributions to this great library. I have read many of your answers across spectrum with regards to this library which have helped me a lot.
The FormProvider example blew my mind 🤩 🤯. For ages I've been trying to get my head around how to get everything working properly with subcomponents and this video finally helped things to click! Thank you!
Nice tutorial for beginners, well done! I just wanted to mention that it could be good to know that you can infer the type from the yup schama to keep your types DRY. Basiaclly you could do `type FormInputs = yup.InferType`.
This is awesome and came at the perfect timing as I have just been struggling with raw React to create some forms and wanted it to be less code but lean on materialui to make it pretty. This tutorial series ticks a lot of boxes for me. Thank you
That helped a lot. I was trying to pass the IFormInputs as Generic Type to another subcomponent and react hook from was getting freaking crazy. I guess the Provider solution might work! I'm stuck for like hours now, hahah deserved sub and like bro, keep it up! Nice english btw, barely noticed que tu era brasileiro! =)
thank you for all the information. I'm new to coding , and I installed the yup and @hookform/resolvers, and I got - " npm i yup up to date, audited 1551 packages in 5s 251 packages are looking for funding 74 vulnerabilities (69 moderate, 5 high) To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details." it did the same thing for @hookform/resolvers....what does it mean? I understand this "audit" is something new to npm but is it safe to use these packages? thanks
Nice and useful tutorial series. it would be great if you could add one more video covering MUI Select, Date, Checkbox, Radio Buttons, etc. I'm not clear on how to integrate those. Thanks!
thks. very good as usual. BTW , have you found why eslint is sooo slow to check static typing? Facing up this same annoying behavior, but coudn't figure out where it comes from. very disturbing when programming. seems to be related MUI v5 but not sure
Hmm I have wondered this as well. The only way I can maybe think of is by doing some type of object combining. Where you define and export each schema in the subComponent, and then in the one with useForm(), you combine the two with something like type schema = sub1Schema & sub2Schema
Hey there, I used to not notice any difference in previous versions of react hook form. But for version 7 It seemed using controllers was the specified way in their documentation and I believe at the time I wasn’t able to get it working with inputRef, but I may be mistaken it’s been a little while. I’ve used inputRef in version 6 however
Great teaching! Can you please do stuff on Ant Design? There's really no good stuff on this here yet, it's a great chance, and I really need it lol Thank you bro, keep it coming.
Really good stuff Leo! Can you create one for AntD, in a slower fashion? Or maybe even create a course exclusively on this, like a 5 hour thing where you go into more detail step by step showing several components from AntD and also how to connect them with RHF. This is good, but left me wanting for more.
@@CodeDunks have you figured out how to make this? This only occurs with element. Passing {...register} f.e. to default html element like works just fine getting cursor on field.
Great video! Thanks, quick question. I have a component with multiple forms on it. It seems that I cannot add properties to a schema that a form does not supply, (get an error `repeatPassword` is required which makes sense). So how do I add validation for multiple forms?
You could try and pass props down to the input level base component through the materialUI Textfield like so the InputProps={{}} should allow you to pass down props to the lowest level as discussed here material-ui.com/api/text-field/ methods. methods are from useForm() from react-hook-form. for example const methods = useForm()
nossa cara, voce me ajudou muito mesmo, sou junior em programao React!!! muito obrigado de coracao ============================= thanks man, you really helped me, I'm a junior in React programming!!! thank you very much from my heart
Thanks, Leo! as a beginner FE dev I found this guide not quite hard to follow along. Just my 2 cents is just maybe you can slow down a little bit to explain on important concept (feel a bit rushing). Anyway a nice topic maybe in the future is Git workflow (with team via remote repo etc), very useful I think.
please make a form that captures de data using react hook form and works as an adding column for a MUIDataTable, like and Add button, edit button and Delete.
Hi Leo, thank you for the tutorial. It helps a lot! Getting to the SubComponents1 & 2, doing exactly what you did I keep getting the following error on the 'helperText': i.imgur.com/O3WKK8Y.png Any idea on how to solve? Thank you!
Seems like you are trying to pass in a FieldError type where it is expecting a ReactNode. stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement The submitted answer does a good job in describing what the ReactNode typing is. Pretty much you can't pass in whatever part of that is a FieldError type. You either need to pass in a component or a string value
@@dolusdirectu I was able to solve this by doing this: "helperText={errors.email ? errors.email?.message?.toString() : ''} ", but I am not sure if this the best solution, and why Leo's codes do not have this kind of error, wondering 🙄
The best tutorial I have come accross for React-Hook-Form. No one else explained how the Controller works in enough detail to help me in my project. Thank you!
Thanks for the tutorial. I'm new to RHF but I used it with MUI recently and did not need the Controller component to register the inputs of the TextField MUI components, it worked exactly the same as if you were using native elements. However when I needed to register the value of a date picker the only solution was to bring in the Controller component.
I'm a Japanese learning react.
It was a very good video.
Thank you very much.
This is the best tutorial content for combining React Hook Form with UI libraries. Very informative, delivered in interesting way. Thank you Sir!
Thank you!
Thanks for this! It's just what I was looking for 🤩
This tutorial is incredible and your energy while teaching is also very inspiring. Thank you!
really excellent video! exactly what I was looking for... one note, adding `Schema` to `useFormContext` provides type safety
```
const {
control,
register,
formState: { errors },
} = useFormContext();(
```
How did you build the template-cli? Looks interesting how you scaffold the project quick
Thank you so much for making this video! I'm a visual learner so just reading the documentation alone is a bit challenging for me. You answered all of my questions regarding this library as well as how to use it with Material UI. I owe you a beer, sir!
Glad it was helpful!
I agree with this guy, it's been great help understanding registers and validation! This is EXACTLY what I was looking for.
This is awesome! Thank you very much for the tutorial.
Thank you Bill! If you are the same as @Bluebill (have the same profile image) I thank you for all the community help and contributions to this great library. I have read many of your answers across spectrum with regards to this library which have helped me a lot.
@@CodeDunks You are most welcome. ❤️
The FormProvider example blew my mind 🤩 🤯. For ages I've been trying to get my head around how to get everything working properly with subcomponents and this video finally helped things to click! Thank you!
So, after watching your video, I went for this custom input field. Thank you for the video. It helped a lot.
(
)}
/>
Great tutorial! Thanks, Leo! exactly what I needed!
Nice tutorial for beginners, well done! I just wanted to mention that it could be good to know that you can infer the type from the yup schama to keep your types DRY. Basiaclly you could do `type FormInputs = yup.InferType`.
Whoa, that's cool. I appreciate this info!
what about DatePicker fields. Do you have any video talking about them?
This is awesome and came at the perfect timing as I have just been struggling with raw React to create some forms and wanted it to be less code but lean on materialui to make it pretty. This tutorial series ticks a lot of boxes for me. Thank you
You did a great job explaining, thank you
That helped a lot. I was trying to pass the IFormInputs as Generic Type to another subcomponent and react hook from was getting freaking crazy. I guess the Provider solution might work! I'm stuck for like hours now, hahah deserved sub and like bro, keep it up!
Nice english btw, barely noticed que tu era brasileiro! =)
Simple explanations, quick and pretty useful examples with background of why, how and when use certain things. Great tutorial 🔥, thanks Leo.
my dude this came in clutch
thank you for all the information. I'm new to coding , and I installed the yup and @hookform/resolvers, and I got - " npm i yup
up to date, audited 1551 packages in 5s
251 packages are looking for funding
74 vulnerabilities (69 moderate, 5 high)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details."
it did the same thing for @hookform/resolvers....what does it mean? I understand this "audit" is something new to npm but is it safe to use these packages?
thanks
But 1 question how validate field before onSubmit press, just when type and then clean values
Nice and useful tutorial series. it would be great if you could add one more video covering MUI Select, Date, Checkbox, Radio Buttons, etc. I'm not clear on how to integrate those. Thanks!
is the video out of sync with his voice, or is that my connection?
This is exactly the video I've been looking for for days, thank you.
I could not get handleSubmit to be called once i switched to using Controller component, very frustrating
very helpful and details video, thank you bro.
Good job! Thank you! This video is a real diamond!
react hook form 7, typescript, mui
Excellent video
thks. very good as usual. BTW , have you found why eslint is sooo slow to check static typing? Facing up this same annoying behavior, but coudn't figure out where it comes from. very disturbing when programming. seems to be related MUI v5 but not sure
Hey Jerome, I have actually noticed that sometimes. Also not sure if related to MUI v5 or just something else.
this video was so helpful, thank you
Is there a way to keep the validation schema in SubComponent1 and SubComponent2 and not in the parant component?
Hmm I have wondered this as well. The only way I can maybe think of is by doing some type of object combining. Where you define and export each schema in the subComponent, and then in the one with useForm(), you combine the two with something like type schema = sub1Schema & sub2Schema
@@CodeDunks sound like a plan.
Hello! Thanks for the video, Is there any difference between using Controller as a wrap for Textfield than just passing "register" as an inputRef ?
Hey there, I used to not notice any difference in previous versions of react hook form. But for version 7 It seemed using controllers was the specified way in their documentation and I believe at the time I wasn’t able to get it working with inputRef, but I may be mistaken it’s been a little while. I’ve used inputRef in version 6 however
What keyboard are you using?
does anyone it achieved create a hook with the Controller and the render prop? With typescript.
Great teaching! Can you please do stuff on Ant Design? There's really no good stuff on this here yet, it's a great chance, and I really need it lol Thank you bro, keep it coming.
Really good stuff Leo! Can you create one for AntD, in a slower fashion? Or maybe even create a course exclusively on this, like a 5 hour thing where you go into more detail step by step showing several components from AntD and also how to connect them with RHF. This is good, but left me wanting for more.
I can't seem to figure out how to get the cursor to go to the input field when the form is submited with an empty or invalid field. Any ideas?
I am not sure if it auto focuses on the input field. You might need to add extra focus logic for the input field you want it to focus on.
@@CodeDunks have you figured out how to make this? This only occurs with element. Passing {...register} f.e. to default html element like works just fine getting cursor on field.
@@sebastiandrozd233 I haven't really looked into it besides the first comment a couple months ago.
Great video! Thanks, quick question. I have a component with multiple forms on it. It seems that I cannot add properties to a schema that a form does not supply, (get an error `repeatPassword` is required which makes sense). So how do I add validation for multiple forms?
resolved it with this
```
const {control: controlLogin, handleSubmit: handleSubmitLogin, formState: {errors: errorsLogin}} = useForm({
resolver: yupResolver(loginSchema),
});
```
@@peterboomsma Nice!
that great tutorial! thank you.
Please make a complex form Using React hook form & meterial ui including edit functionality
Was planning on making one here soon and I appreciate the idea!
Subbed instantly! Respect from India.
can i get template kit!
Can you make a base input component using material or ant input etc with typescript and react hook form. how can i pass the props ? im so confused.
You could try and pass props down to the input level base component through the materialUI Textfield like so
the InputProps={{}} should allow you to pass down props to the lowest level as discussed here material-ui.com/api/text-field/
methods. methods are from useForm() from react-hook-form. for example const methods = useForm()
Thank you so much.
24:30 just do errors.email?.message ?? 'default message'
Hey! Which version of react-hook-form is used here ?
Version 7
привіт! не шукаєш проект? :) ми шукаємо фронт інженера в львівський офіс американського стартапу ;)
Really helpful video, thx man!
Muito, mas muito obrigado mesmo. Este vídeo me ajudou a finalmente entender com aplicar MUI com react. Parabéns pra você. Ótima aula!
nossa cara, voce me ajudou muito mesmo, sou junior em programao React!!! muito obrigado de coracao
=============================
thanks man, you really helped me, I'm a junior in React programming!!! thank you very much from my heart
Valeu Anderson. Obrigado pela traducao, mas também só Brasileiro haha. Boa sorte com React!
it was really very helpful for me... thanks a lot :)
Terse and Great!
Thanks, Leo! as a beginner FE dev I found this guide not quite hard to follow along. Just my 2 cents is just maybe you can slow down a little bit to explain on important concept (feel a bit rushing). Anyway a nice topic maybe in the future is Git workflow (with team via remote repo etc), very useful I think.
Thanks for the feedback!
please make a form that captures de data using react hook form and works as an adding column for a MUIDataTable, like and Add button, edit button and Delete.
Was planning on doing something similar here when I have the chance to get to it. Appreciate the comment!
Thank you!
Hi. Thank you.
great
Your import ordering triggers my OCD.
I like it but I don't understand what's the point of doing that so fast while trying to explain sth to someone... it's just pointless
I wish You didnt use Typescript
Doaa is a girl lol
Hi Leo, thank you for the tutorial. It helps a lot!
Getting to the SubComponents1 & 2, doing exactly what you did I keep getting the following error on the 'helperText':
i.imgur.com/O3WKK8Y.png
Any idea on how to solve?
Thank you!
Seems like you are trying to pass in a FieldError type where it is expecting a ReactNode.
stackoverflow.com/questions/58123398/when-to-use-jsx-element-vs-reactnode-vs-reactelement
The submitted answer does a good job in describing what the ReactNode typing is. Pretty much you can't pass in whatever part of that is a FieldError type. You either need to pass in a component or a string value
Hey, I have the same error. Have you been able to figure it out?
@@dolusdirectu I was able to solve this by doing this: "helperText={errors.email ? errors.email?.message?.toString() : ''} ", but I am not sure if this the best solution, and why Leo's codes do not have this kind of error, wondering 🙄
@@dylandu832 thx broski
Thank you for the tutorial!
This is awesome!
awesome tut, thanks a lot