提交表单后控制台无法显示表单值的技术求助

1. 优先检查表单验证状态 #

你的Zod Schema中numberOfKids定义为number类型，但默认Input组件会返回字符串值，这会直接触发验证失败，导致onSubmit根本不会执行。可以通过两种方式修复：

• 改用z.coerce.number()自动转换字符串为数字：

  const formSchema = z.object({
    // ...其他字段
    numberOfKids: z.coerce.number().min(1, {
      message: 'Number of kids must be at least 1'
    }).int({
      message: 'Number of kids must be an integer'
    })
  });
  

• 给Input添加type="number"，同时在useForm初始化时设置正确的数字类型默认值：

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      firstName: '',
      lastName: '',
      email: '',
      numberOfKids: 1 // 必须是数字，不能是字符串
    }
  });
  

同时可以在表单字段后添加错误提示，直观查看验证失败原因：

<FormField
  control={form.control}
  name="numberOfKids"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Number of Kids</FormLabel>
      <FormControl>
        <Input {...field} type="number" placeholder="" />
      </FormControl>
      <FormErrorMessage>{form.errors.numberOfKids?.message}</FormErrorMessage>
    </FormItem>
  )}
/>

2. 确认useForm初始化配置 #

必须确保使用zodResolver关联Zod Schema和react-hook-form，否则验证逻辑不会生效，也会导致提交流程异常：

import { zodResolver } from '@hookform/resolvers/zod';
import { useForm } from 'react-hook-form';

// ...

const form = useForm<z.infer<typeof formSchema>>({
  resolver: zodResolver(formSchema),
  defaultValues: { /* 正确的默认值 */ }
});

3. 检查表单结构与提交触发条件 #

• 确保表单内存在type="submit"的按钮，没有提交按钮无法触发表单提交事件：

  <form onSubmit={form.handleSubmit(onSubmit)}>
    {/* 表单字段 */}
    <button type="submit">提交</button>
  </form>
  

• 检查<Form {...form}>与内部<form>的嵌套是否符合shadcn/ui的使用规范，部分场景下重复嵌套可能导致事件失效，可尝试简化结构。

4. 调试onSubmit触发状态 #

如果以上步骤都没问题，先简化onSubmit函数确认是否触发：

const onSubmit = async () => {
  console.log('提交事件已触发');
  console.log('当前表单值:', form.getValues());
};

如果控制台打印出"提交事件已触发"但没有值，再检查字段的name属性是否与Schema中的键完全一致（比如大小写、拼写）。

内容的提问来源于stack exchange，提问作者342k