React Hook Form - Controller

Hey Bill, thanks for the video. A quick question, why do we need to spread the props in the Controller? What would happen if we don't (i.e. don't use the spread operator)?

This is super cool. Thanks for showing off how this works. Complex forms can be so challenging. I really appreciate all the work you put in

Thanks for the great guide bill.

Just I have simple form with 5 text fields
With MUI 5 and React hook forms.

I created a component for text field in MUI 5 .

I want to write a controller for every field or in component level using useFormContext...

Which is the best practice...

Please give reply....

Please do one sample code in sandbox ..

Please...

Why are you defining your own Controller instead of using the Controller component that already comes with the library? What's the point of the exercise?

50fps is pretty weird, sometimes it's smooth, sometimes not. Regardless, very informative video.

I am using react table with react hook forms. If, I have 100 records but if I try to update single field using index its updating 100 records (we are using onBlur on each fields). I want to update only single field and after entering 100 records, I am facing performance issues.
Example:
<Table
columns={Columns}
data={fields}
updateMyData={updateMyData}

/>

please give any example

Hey Bill, what is the use of field.onChange() in the docs it says "A function which sends the input's value to the library. It should be assigned to the onChange prop of the input." what is the library? and also can I set a custom onChange() ? what I am trying to do is modify a value according to another registered value. I tried doing this:

<Controller
render={({ field }) => (
<Select
style={{ width: "100%" }}
{...field}
onChange={(e) => handleChange(e)}
>
{children}
</Select>
)}
name={name}
control={control}
/>

but it doesn't work

Really appreciate the videos and documentation you have around react-hook-form. It’s legendary. I’m glad I used it in my last project.

Hi, Could you please create a video on useController. I am unable to find any tutorial/video on it. or creating reusable component(mui) with useController and validation. ty

Hi Bill, i really hope u reply this.. im facing an issue the data from onSubmit return empty object.. im using MUI, and each custom textfield, autocomplete etc ill make sure they are connected with control from useFormContext.. and i also double check my form was wrap with FormProvider and pass all methods from useForm.. talking about useForm hook, i also provide the defaultValue and resolver.. so my question, in your experience, what the causes submit will return the empty object..

This is amazing, Thanks fo this amzing library

Great video, thanks for library :)

How to use setValue with Controller

Came here from the doc, but you are reimplementing the builtin controller here right?

If my input component has some weird onChange argument signature, is Controller the only way to get the input into RHF?

Hey I am using rhf with yup. Now I make input components using controller and useFormContext and use that component using FormProvider. Now I want some validation in component level and some validation in page level. So How can I do that.? And I am using mantine UI.

can you do an example of a complex form that has update and a lot of select values that comes from gql quries? im really lost, im using controller but i think i need something more

It is very helpful but this is advance video

Pertect

Do you guys have a guide for other types of inputs? It's quite frustrating everyone just shows a simple text field while the most of us in the field have to deal with selects and others. I'm having problems with using Controller with MUI components and there's little to go on.