如何在shadcn/ui Form组件中使用Range Date Picker并解决报错

问题场景 #

在shadcn/ui的Form组件中搭配Range Date Picker时，需要用{from, to}格式的对象存储日期范围值，但将该对象作为Form字段值后，错误消息会失效，仅显示undefined。目前已通过修改Form Message Component临时解决，但这只是权宜之计，需要找到正确的适配方案。

临时解决方案（仅供参考） #

通过手动修改Form Message组件，强制读取对象字段下的错误信息：

// 临时修改的Form Message组件
function FormMessage({ field, ...props }) {
  // 手动提取对象字段的错误内容
  const errorMsg = field.error?.from?.message || field.error?.to?.message || field.error?.message;
  return <div {...props}>{errorMsg}</div>;
}

这种方法仅能临时解决当前字段的问题，复用性差，且不符合表单校验的规范逻辑。

正确解决思路（基于React Hook Form规范） #

shadcn/ui的Form底层依赖React Hook Form，针对对象类型的字段，需要从校验规则、字段绑定、错误读取三个层面规范处理：

1. 配置嵌套的校验规则 #

针对dateRange对象的from和to属性分别设置校验逻辑（以Zod resolver为例）：

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

const formSchema = z.object({
  dateRange: z.object({
    from: z.date().min(new Date(), "开始日期不能早于当前日期"),
    to: z.date().min(z.ref("dateRange.from"), "结束日期不能早于开始日期"),
  }),
});

const form = useForm({
  defaultValues: {
    dateRange: { from: null, to: null },
  },
  resolver: zodResolver(formSchema),
});

2. 正确绑定Range Date Picker到表单字段 #

使用React Hook Form的嵌套字段命名方式，确保字段值的更新能被表单正确追踪：

import { Form, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { RangeDatePicker } from "@/components/ui/range-date-picker";

<Form {...form}>
  <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
    <FormField
      control={form.control}
      name="dateRange"
      render={({ field }) => (
        <FormItem>
          <FormLabel>选择日期范围</FormLabel>
          <RangeDatePicker
            value={{ from: field.value.from, to: field.value.to }}
            onValueChange={(newValue) => field.onChange(newValue)}
          />
          <FormMessage />
        </FormItem>
      )}
    />
    <button type="submit">提交</button>
  </form>
</Form>

3. 适配对象字段的Form Message组件 #

如果默认的Form Message无法正确读取嵌套错误，可以自定义组件，按照React Hook Form的错误结构提取信息：

import { useFormContext } from "react-hook-form";

function FormMessage({ name, className = "text-sm text-red-500" }) {
  const { formState: { errors } } = useFormContext();
  const fieldError = errors[name];
  
  // 优先读取对象属性的错误，再读取字段本身的错误
  const errorMessage = fieldError?.from?.message || fieldError?.to?.message || fieldError?.message;
  
  if (!errorMessage) return null;
  
  return <div className={className}>{errorMessage}</div>;
}

这样处理后，错误消息就能正确显示对应的校验提示，同时符合表单组件的复用性和规范要求。

内容的提问来源于stack exchange，提问作者Au Gus Tas