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
มีวิธีที่จะ:
- อย่าให้มีปุ่มวิทยุใดถูกเลือกในการแสดงผลครั้งแรก
- ยังคงใช้การตรวจสอบ zod onSubmit เพื่อให้แน่ใจว่าค่าของกลุ่มปุ่มวิทยุอยู่ในชุดที่กำหนดหรือไม่?