英文:
React Hook Form: useForm not returning any errors in formState
问题
我正在使用T3堆栈 + react-hook-form + zodResolver:@hookform/resolvers/zod创建一个应用程序。
我有一个如下定义的zod模式：
export const AccountSchema = z.object({
id: z.string().uuid().optional(),
title: z.string().min(1, { message: 'Title is required' }),
description: z.string().min(1, { message: 'Description is required' }),
});
export type Account = z.infer<typeof AccountSchema>;
在组件中，我正在使用useForm Hook，如下所示：
const editForm = useForm<Account>({ resolver: async (val, ctx, opt) => {
const res = await zodResolver(AccountSchema)(val, ctx, opt);
console.log('Validation Result:', res, val);
return zodResolver(AccountSchema)(val, ctx, opt);
}});
表单提交处理程序：
onSubmit={void editForm.handleSubmit(() => console.log('success'), (val) => console.log('Errors: ', val))}
使用的包：
- "zod" -> "3.20.7"
- "@hookform/resolvers" -> "2.9.11"
- "react-hook-form" -> "7.43.5"
问题：
查看控制台日志，我可以看到zodResolver将正确的错误传递给useForm解析器，但formState对象中的errors始终为undefined，即editForm.formState.errors.title始终返回undefined。
此外，无论表单是有效还是无效，都会在提交时重新加载页面。
英文:
I am creating a app using T3 stack + react-hook-form + zodResolver:@hookform/resolvers/zod
I have a zod schema defined as below
export const AccountSchema = z.object({
id: z.string().uuid().optional(),
title: z.string().min(1, { message: 'Title is required' }),
description: z.string().min(1, { message: 'Description is required' }),
});
export type Account = z.infer<typeof AccountSchema>;
And in a component I am making use of useForm Hook as below
const editForm = useForm<Account>({ resolver: async (val, ctx, opt) => {
const res = await zodResolver(AccountSchema)(val, ctx, opt);
console.log('Validation Result: ', res, val);
return zodResolver(AccountSchema)(val, ctx, opt);
}});
form Submit Handler:
onSubmit={void editForm.handleSubmit(() => console.log('success'), (val) => console.log('Errors: ', val))}
Packages used:
"zod" -> "3.20.7"
"@hookform/resolvers" -> "2.9.11"
"react-hook-form" -> "7.43.5"
Issue:
Looking at the console log, I can see zodResolver is passing correct errors to useForm resolver but in the formState object errors is always undefined
ie: editForm.formState.errors.title is always returning as undefined.
Also on submit always reloads the page irrespective of the form being valid or invalid.
答案1
得分: 0
以下是代码部分的中文翻译：
好吧，刚刚发生在我身上，结果是我在表单字段中调用了错误的onSubmit操作：
const schema = z.object({
description: z.string().min(3).max(50).nonempty(),
amount: z.number().min(0).nonnegative(),
category: z.enum(categories),
});
type FormData = z.infer<typeof schema>;
const DataForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>({ resolver: zodResolver(schema) });
然后，更改表单的onSubmit解决了问题：
<form onSubmit={handleSubmit()}>
希望这对你有所帮助。
英文:
Well, it just happened to me and turned out that I'm calling the wrong onSubmit action in the form field:
const schema = z.object({
description: z.string().min(3).max(50).nonempty(),
amount: z.number().min(0).nonnegative(),
category: z.enum(categories),
});
type FormData = z.infer<typeof schema>;
const DataForm = () => {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<FormData>({ resolver: zodResolver(schema) });
Then, changing the form onSubmit solved the issue:
<form onSubmit={handleSubmit()}>
Hope this helps out.
答案2
得分: 0
"Wow."
"The 'void' before handleSubmit was causing the issue."
"Had added void due to eslint@typescript-eslint/no-misused-promises rule."
英文:
Wow.
The "void" before handleSubmit was causing the issue.
Had added void due to eslint@typescript-eslint/no-misused-promises rule.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论