V6 - React Hook Form - building dynamic form (Field Array)

In this video tutorial, we are going to through how to build a dynamic form with useFieldArray and useWatch.

----

[bencodes]

You sir, are an amazing human for making forms so easy!

[JojoNicho]

Thanks for the great video! I can already see real-life scenarios where this feature would be handy. Also noticed your improved English. Keep it up, I'm a fan!

[chaddpoggenpoel]

Amazing video. Super valuable information. Will definitely play with it and ask in comments if I have a question. Not sure if I will have any though. Explanation was on point and concise! Keep up the good work! Thank you and God bless you !

[DeepakKapiswe]

Great and helpful Video, Thanks for sharing

[RahdixCloudNine]

subscribed and many thanks Bill, amazing!

[aimanjaffer]

What's the use of <Controller/> while using useFieldArray forms

[tbass.p]

you are a life saver, thank you! Me and my dificulty to understand documentations ahhhh... now my problem changed: "how can i made a update form with it? populating a list with a json and allow the user to edit it anyway?"

[zhalux]

Can you add yup schema validation to this? Noticed the array abject shape validation did not work for version react hook form version 6

[guillaumek]

Thank you !
Im not sure the 'remove' methods provided by the lib is really removing at specified index tho. For me ths this doesn't work at all, it just remove the last of the array ..

EDIT: I'm a noob. Please do not use as the key the index of the map when you iterate over you inputs. There is an 'id' property auto generated in your item that you must use as the key. At least, it's how i got it working

[Ady]

Thanks for the demo video. I am stuck with nested dynamic form (Same as your form but with one more append for specific field), please suggest something for this.

[joe-sydney-au]

Has the API for react-hook-form v.7 changed with respect to refs ? I get errors on the line ref={register()} inside input, what's going on?

[rujalsapkota]

Could you please tell me how to set defaultValues through condition ??

defaultValue={editMode ? 'Hi':' '}
its not working

[turin]

How can i set empty object into fields array on init?

[danielpreza]

thank you for the video but I have a question, how can I show by default elements?

[josephcoyle]

This may just apply to V7, but I found that instead of just doing {...register()}, I had to do {...register("name")} to see any values in my onSubmit array.

[mahendranath]

Thank you so much very helpful, can you increase the voice, it very low, and can you zoom your screen bigger, it a very small letter, pls

[rujalsapkota]

How to add error.message for each field ???? I am unable to use optional chaining

[ramonmaciel]

Amazing video, amazing lib! A little doubt, how I render a input components before run the append?

[sergio]

Hi Bill, could you prepare a demo showing how to bind the data from the Redux storage with useFieldArray? I'm having some problems with it. Thank you. Great Video and Thank you for you helping.

[abelmurua]

Great video, thanks. I have a typescript error. When I enter 'name' as the parameter for useFieldArray({}) I get this typescript error: "Type 'string' is not assignable to type 'never'. The expected type comes from property 'name' which is declared here on type 'UseFieldArrayProps<FormValues, never, "id">'" any idea why? When I remove my type of <FormValues> from useForm<FormValues>(); this error disappears