Generic form: Why can't I use default form values of type FieldValues?

[NiklasKappel]

I am trying to write a generic BaseForm component, so that I can create multiple forms just by slotting in default values, validation scheme and the actual UI elements. But I did not get very far before encountering the error on line 10 in this code sandbox.

The offending code is:

import { FieldValues, useForm } from "react-hook-form";

interface BaseFormProps<TFormValues extends FieldValues> {
  defaultValues: TFormValues;
}

function BaseForm<TFormValues extends FieldValues>({
  defaultValues,
}: BaseFormProps<TFormValues>) {
  const { control, handleSubmit } = useForm<TFormValues>({ defaultValues });  // ERROR
}

In the line marked with "ERROR", at defaultValues, typescript complains:

 Type 'TFormValues' is not assignable to type 'AsyncDefaultValues<TFormValues> | DefaultValues<TFormValues> | undefined'. typescript (2322) [10, 60]
   Type 'FieldValues' is not assignable to type 'AsyncDefaultValues<TFormValues> | DefaultValues<TFormValues> | undefined'. 

Note that typescript also requires TFormValues to extend FieldValues. Is this a problem with react-hook-form, or am I doing something wrong?

[ktalalykin]

defaultValues are not a simple object on RHF side.
if you rewrite you BaseFormProps interface like this, it should work

import { FieldValues, useForm, UseFormProps } from "react-hook-form";

interface BaseFormProps<TFormValues extends FieldValues> {
  defaultValues: UseFormProps<TFormValues>["defaultValues"];
}

function BaseForm<TFormValues extends FieldValues>({
  defaultValues,
}: BaseFormProps<TFormValues>) {
  const { control, handleSubmit } = useForm<TFormValues>({ defaultValues }); 
}

However, if you creating BaseForm to isolate hook usage, i would advise to do smth like this, it will allow to pass any attribute of useForm as a prop to your BaseForm

type BaseFormProps<TFormValues extends FieldValues> = {
  children: React.ReactNode;
} & UseFormProps<TFormValues>;

const DeclarativeFormProvider = <TFormValues extends FieldValues>(props: BaseFormProps<T>) => {
  const { children, ...formProps } = props;
  const form = useForm<T>(formProps);
 ......
};