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>
);
}