In this session, we are taking a look at the useFieldArray custom hook to manage your dynamic form fields. working example: codesandbox.io/s/usefieldarra...
amazing stuff... i'm creating a form that it is supposed to be loaded with server data, and it allows users to update this data. The summary at the end that needs only the changed fields is giving me a headache, but your videos are helping me a lot. Thanks!
One of the better coding tutorials. Mostly I was just interested in the usage, eg for append and field arrays in general. I followed along and all works great. Keep up the good work!
Great video. That's exactly the use case I had: allowing the user to dynamically add extra items to an estimate or to a receipt :) It's also great you use TypeScript in your videos as its really becoming more and more required in lots of job offers (React + TS).
Working great! The only issued I had was 'Uncaught TypeError: methods is null'. It was simply because I imported 'Control' from 'react-hook-form' (KO) instead of destructuring 'control' (lower case 'c') from the object returned by useForm() (OK). Thanks again from this great video. It's great the cursor is also set properly on a field added by the user when there is an error (like a required field with no value provided by the user). :)
fought literally week against usefieldarray xd less than 10min from video, and were able to finish my stuff. mby next time i check tutorials or read stuff before i start trying
great video. what approach would you say would be best for using react hook form with a custom build select (so not using native element) - any demos? Thanks
Hello, thank you for the video. I have a question though: I want to have a language set with three select fields with options: first is "Language", second is "Oral Skill for this language" and "Writing skill for this language". However, I want initially only "language" field to appear, and only after selecting a language (i.e. giving it value), I want two other fields to appear. And the append button should become disabled as soon as I added a language, until we selected all three selects. N.B. I can not use onChange or OnValueChange functions. Does it still work because of watch?
Hey can you make a video of using react hook form with Zod and TS that passes register and errors into custom input components that, so UI can be standard instead of always having to build it out everytime, thankyou. Also great videos so far, I've learned alot, very useful.
Hi Beier, thank you for the great tutorial!! But I really want to know how to validate these "name fields" have the same value! It doesn't make any sense that user can type the same value over and over again.
Thanks for the video!! I tried this hook but notice that the state of the newly generated field created with the append method, doesn't look like expected, for example, the field is generated with the isDirty state as true by default. I am using the React Hook Form DevTools. By any chance have you seen this behavior before? Thanks in advance
it cannot infer the fields type when using it on other component file inside form context area, where we are not passing the control props (optional if using form context)
Thanks for your demo! Have a question... Why do you use the dot here`cart.${index}.name`? When in other examples without the dot. Thanks for the answer
hello sir i have a problem i want to get total in useFieldArray example append name price1 amount1 total1 when i click append again total2 autoamtically get valuei in total1
amazing stuff... i'm creating a form that it is supposed to be loaded with server data, and it allows users to update this data. The summary at the end that needs only the changed fields is giving me a headache, but your videos are helping me a lot. Thanks!
Thank you Beier! Approaching docs would be much easier now after watching this.
Thank you!
The best human being is the one who benefits others.
One of the better coding tutorials. Mostly I was just interested in the usage, eg for append and field arrays in general. I followed along and all works great. Keep up the good work!
It is very advanced usage of the react hook forms, nice to have it, thanks.
No worries! Give it a try. It's quite powerful.
You sir are great. Thankyou for this awesome library.
Incredible, now I managed to implement. I didn't understand from the documentation.
Great video. That's exactly the use case I had: allowing the user to dynamically add extra items to an estimate or to a receipt :) It's also great you use TypeScript in your videos as its really becoming more and more required in lots of job offers (React + TS).
Thanks again for your work on this!
Thanks for sharing
Working great!
The only issued I had was 'Uncaught TypeError: methods is null'. It was simply because I imported 'Control' from 'react-hook-form' (KO) instead of destructuring 'control' (lower case 'c') from the object returned by useForm() (OK). Thanks again from this great video.
It's great the cursor is also set properly on a field added by the user when there is an error (like a required field with no value provided by the user). :)
Yea, I believe focus management is really important for accessibility.
thanks man
Thank you Bill.
Super nice video. Very helpful
So good. Thank you!
Most welcome! thank you.
Thank you very much! It was very useful.
You are most welcome! So glad to hear that.
Thanks, your save my life
hahaha, glad I can give you a hand.
fought literally week against usefieldarray xd less than 10min from video, and were able to finish my stuff. mby next time i check tutorials or read stuff before i start trying
How to calculate the total for each item if I have a quantity field? Thanks
great video. what approach would you say would be best for using react hook form with a custom build select (so not using native element) - any demos? Thanks
Hello, thank you for the video. I have a question though: I want to have a language set with three select fields with options: first is "Language", second is "Oral Skill for this language" and "Writing skill for this language".
However, I want initially only "language" field to appear, and only after selecting a language (i.e. giving it value), I want two other fields to appear.
And the append button should become disabled as soon as I added a language, until we selected all three selects.
N.B. I can not use onChange or OnValueChange functions. Does it still work because of watch?
Hey can you make a video of using react hook form with Zod and TS that passes register and errors into custom input components that, so UI can be standard instead of always having to build it out everytime, thankyou. Also great videos so far, I've learned alot, very useful.
Thank you, I will get to it when I can, it's on my todo list.
@@bluebill1049 thankyou very much, I look forward to your video
Hi Beier, thank you for the great tutorial!! But I really want to know how to validate these "name fields" have the same value! It doesn't make any sense that user can type the same value over and over again.
Thanks for the video!!
I tried this hook but notice that the state of the newly generated field created with the append method, doesn't look like expected, for example, the field is generated with the isDirty state as true by default.
I am using the React Hook Form DevTools.
By any chance have you seen this behavior before?
Thanks in advance
I need to store objects removed from useFieldArray remove method to another array for subsequent use. How can I achieve this?
it cannot infer the fields type when using it on other component file inside form context area, where we are not passing the control props (optional if using form context)
Thank you
Thanks for your demo! Have a question...
Why do you use the dot here`cart.${index}.name`? When in other examples without the dot. Thanks for the answer
For type checking.
@@bluebill1049 Thank you!
Hello Sir, can we make name field will be unique when user try to submit then get error like name field should be unique on particular field.
How to move item of one useFieldArray to another useFieldArray ? we can use move for one specific fieldArray for moving item....
Explore it's update value function
hello sir i have a problem i want to get total in useFieldArray example append name price1 amount1 total1 when i click append again total2 autoamtically get valuei in total1
How would you manage multiple uses of useFieldArray? Say you had carts, items and products that were all arrays in the form object.
Have multiple `useFieldArray`?
@@bluebill1049 Yeah, I'm stupid. Thanks :)
hello, can i use this in a controller
Is it required with array of objects sir? I wanna use array of string instead, but typescript warns me with append("")
zdid you find the solution? typescript complains about typing
why the codesandbox does not work?
I would like to ask about can I try two different arrays ? I mean two different names.
just create two useFieldArray instances and slot them into two different components.
@@bluebill1049 Thank you, Sir! I got it.
Accurate closed captions would be appreciated