ค้นหาเว็บไซต์

typescript - การใช้การตรวจสอบฟอร์มด้วย zod กับกลุ่มปุ่มวิทยุที่ไม่มีค่าเริ่มต้นถูกเลือกเมื่อการแสดงผลครั้งแรก


ฉันมีฟอร์มง่ายๆ ที่ฉันกำลังใช้ zod ในการตรวจสอบความถูกต้อง เพื่อความเรียบง่าย ให้สมมติว่าฟอร์มมีเพียงฟิลด์ผู้ใช้หนึ่งฟิลด์สำหรับระบุการเลือก:

const FormSchema = z.object({
    options: z.enum(["option-0", "option-1", "option-2"], {
        required_error: "You must select an option",
    })
})

export default function Form() {
    const form = useForm < z.infer < typeof FormSchema >> ({
        resolver: zodResolver(FormSchema),
        defaultValues: {
            options: "",
        },
    })

    const onSubmit = useCallback(async (data: z.infer<typeof FormSchema>) => {
        console.log(data)
    }, [])

    return (
            <form onSubmit={form.handleSubmit(onSubmit)} 
            ...
            </form>
    )
}

โค้ดข้างต้นไม่ทำงานเนื่องจาก "" ไม่อยู่ในชุดตัวเลือกที่ระบุใน FormSchema

มีวิธีที่จะ:

  1. อย่าให้มีปุ่มวิทยุใดถูกเลือกในการแสดงผลครั้งแรก
  2. ยังคงใช้การตรวจสอบ zod onSubmit เพื่อให้แน่ใจว่าค่าของกลุ่มปุ่มวิทยุอยู่ในชุดที่กำหนดหรือไม่?