useFieldArray and Controller - unexpected results

[frances-datacom]

Hi,

I've been doing some investigation into useFieldArray, and I am bumping into some interesting problems. Please see this CodeSandbox: https://codesandbox.io/p/sandbox/rpwdrj

The code here is fairly straightforward. Click 'Append Item' to append to the 'array' object. Type some text into the input fields and click 'Submit edit'. However:

• the first input field uses register. The value in that field will not be submitted until 'Submit edit' is clicked.
• the second input field uses Controller. When typing into that field, the relevant array item will get updated immediately. The value does not get stored in data, and clicking 'Submit edit' will cause the field to reset to its default value.

I am following the react-hook-form examples, and I cannot figure out why these 2 behave differently. They are setup differently ({...register(firstName, { required: true })} versus <Controller name={``array.${index}.firstName``}, but <Controller name='firstName' doesn't work at all).

Any help would be greatly appreciated.

[BrendanC23]

This is all working as I would expect. I think the confusion arises because you have two separate forms and it's hard to keep track of what input is bound to what form. I've made a new CodeSandbox that includes full types and does not perform any destructuring of the form methods.

For your example, register and Controller behave differently because they are bound to different forms. The register input is updating the editable sub-form. When you type in the input, the main form is not altered until you click submit. Here, register comes from form2 (the edit form).

The Controller input is bound to the main form. When you type in that input, the <Display /> component will update immediately. Here, Controller is passed form1.control (from the main form).

<Controller name='firstName' /> does not work because it is being passed control from the main form. The main form has type

type Form1Data = {
    array: {
        firstName: string;
    }[];
};

It doesn't have a firstName field. This is why you must pass in the array index. In Edit, you never destructured the control value from the useForm.

[frances-datacom]

Thank you!