Open gerkim62 opened 3 months ago
useForm<Input, unknown, Output>
to accomplish this.
useForm<Input, unknown, Output>
to accomplish this.
i couldn't find any docs on this, do you mind sharing a link on the docs about the generics to pass into the useForm please
there's no documentation for now, only an issue about this:
https://github.com/react-hook-form/react-hook-form/issues/9600
I guess this issue should remain open untill docs have been updated, or this issue be closed and a new one opened about the absense of docs for those who might face this same issue in future.
Version Number
7.52.0
Codesandbox/Expo snack
https://codesandbox.io/p/devbox/runtime-star-dkcpzz
Steps to reproduce
When using react-hook-form with a Zod schema that includes transformations, the handleSubmit function is passing data to the onSubmit function typed as z.input instead of the expected z.output. This causes TypeScript errors when trying to access the transformed properties in the submit handler.
To reproduce:
Define a Zod schema with a transformation:
typescriptCopyimport { z } from "zod";
const EmailOrPhoneSchema = z.object({ emailOrPhone: z.string().trim().refine(/ ... /) }) .transform(({ emailOrPhone }) => ({ isEmail: / ... /, isPhone: / ... /, value: / ... / }));
Use the schema with react-hook-form:
typescriptCopyconst { handleSubmit } = useForm<z.input>({
resolver: zodResolver(EmailOrPhoneSchema),
});
function onSubmit(data: z.output) {
console.log(data); // TypeScript error: Property 'isEmail' does not exist on type '{ emailOrPhone: string; }'
}
// ...