Repository navigation
TypeError with the control object #116
Description
Got:
Type 'Control<{ email: string; password: string; }, any>' is not assignable to type 'Control<{ email: string; password: string; }>'.
Types of property '_updateFieldArray' are incompatible.
Type 'import("/xxx/node_modules/react-hook-form/dist/types/form").BatchFieldArrayUpdate' is not assignable to type 'import("/xxx/node_modules/react-hook-form/dist/types/form").BatchFieldArrayUpdate'.
Types of parameters 'updatedFieldArrayValues' and 'updatedFieldArrayValues' are incompatible.
Type 'Partial<FieldArray<TFieldValues, TFieldArrayName>>[] | undefined' is not assignable to type 'Partial<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>[] | undefined'.
Type 'Partial<FieldArray<TFieldValues, TFieldArrayName>>[]' is not assignable to type 'Partial<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>[]'.
Type 'Partial<FieldArray<TFieldValues, TFieldArrayName>>' is not assignable to type 'Partial<FieldArray<TFieldValues, ArrayPath<TFieldValues>>>'.
Type 'keyof FieldArray<TFieldValues, ArrayPath<TFieldValues>>' is not assignable to type 'keyof FieldArray<TFieldValues, TFieldArrayName>'.
Type 'string | number | symbol' is not assignable to type 'keyof FieldArray<TFieldValues, TFieldArrayName>'.
Type 'string' is not assignable to type 'keyof FieldArray<TFieldValues, TFieldArrayName>'.
Type 'string' is not assignable to type 'never'.
Type 'keyof FieldArray<TFieldValues, ArrayPath<TFieldValues>>' is not assignable to type 'never'.
Type 'string | number | symbol' is not assignable to type 'never'.
Type 'string' is not assignable to type 'never'.ts(2322)
Code:
const schema = zod.object({
email: zod.string().email().min(1),
password: zod
.string()
.regex(/^(?=.*[A-Z])(?=.*[a-z])(?=.*d).+$/)
.min(8),
});
export default function Login() {
const {
handleSubmit,
formState: { errors },
control,
} = useRemixForm<zod.infer<typeof schema>>({
mode: "onSubmit",
resolver: zodResolver(schema),
});
return (
<div>
<Form onSubmit={handleSubmit} method="POST">
<FormField
control={control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
<Input placeholder="shadcn" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</Form>
</div>
);
}
Activity
Sutikshan commentedon Nov 9, 2024
you may need to utilise
RemixFormProvider.example impl https://github.com/Sutikshan/tess-fs/blob/main/web/app/routes/provider.organization.tsx#L112
AlemTuzlak commentedon Oct 2, 2026
This issue was closed by #186, which is released in 7.3.0.
In 7.3.0, the return type of
useRemixFormcomes fromUseFormReturnof the react-hook-form version that you install. Before, the built types listed the members of one react-hook-form version. That can causeControlmismatches like the one above. I could not reproduce your exact error, so please try 7.3.0.If you still see the
Controltype error with 7.3.0, comment here with your versions of remix-hook-form, react-hook-form and TypeScript, and I will reopen this.