Type 'Control<MyFormValues>' is not assignable to type 'Control<FieldValues>'

This seems like a duplicate of #2984.

Describe the bug

I am experiencing this issue after following the Control example in your documentation and using any 7.x release. (have tried 7.0, 7.1, 7.2, 7.3 and patch versions of all)

I am calling useForm with a generic type in the shape of my form values – the error occurs whether I use a generic or not – and pass control to my components which wrap form values. My components accept a property control: Control per your example.

I get the error error TS2322: Type 'Control<FormValues>' is not assignable to type 'Control<FieldValues>'. Types of property 'register' are incompatible. and if I don’t assign a generic it will just read the object type e.g. Control<{ valuea: string, valueb: boolean }>.

To Reproduce Steps to reproduce the behavior:

Assign a set of form values to the generic input of useForm
Pass control to component which accepts Control type from react-hook-form
Witness issue

Codesandbox link (Required) https://codesandbox.io/s/nervous-rubin-pdh9g?file=/src/App.tsx

Expected behavior

I expect the generic type that I supply to useForm to be respected throughout the rest of the form interfaces as specified in the documentation.

Screenshots

Desktop (please complete the following information):

OS: MacOS
Browser: All browsers – fails basic TSC compilation
Version: 7.x

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:15 (4 by maintainers)

Top GitHub Comments

6reactions

BTierscommented, Apr 26, 2021

Hello ! I’m not quite sure I understand the problem entirely but if the goal is to have a generic component over the type of the useForm data structure, I think something like this should do the trick:

export interface IReactHookFormFieldProps<T> {
  name: FieldPath<T>;
  control: Control<T>;
  rules?: RegisterOptions<T>;
}

Here is a sandbox showing it with your code.

For fun I’ve made another one that ensure that the key passed to the component is a boolean

You can find this version here (If you’re interested)

Hope it can be helpful ! 😃

4reactions

BTierscommented, Apr 27, 2021

@jordan-jarolim Glad it helped ! 😃

You define an interface to expect T as generic but then you don’t pass it from the component

In this case TS will be able to infer the type of T based off the props. The only use-case I know about for using <Component<MyType> {...props} /> is when you when to opt out of TS compiler type inference which here isn’t the case.

Here is a great reference about that

it’s basically turning off TS check for Control<T> ?

I don’t really get what you mean by “turning off TS check”. With the defined interface, TS expect a prop control: Control<T>, T being a type that extends Record<string, any> which is the same constraint as the Control itself.