react-hook-form and zod, radio group not working with enum
Unanswered
Brewer's Blackbird posted this in #help-forum
Brewer's BlackbirdOP
const testFormSchema = z.object({
questions: z.array(
z.enum(["always", "sometimes", "never"], {
required_error: "Сізге бір жауапты таңдау керек",
invalid_type_error: "Сізге бір жауапты таңдау керек",
})
),
});
const form = useForm<Inputs>({
resolver: zodResolver(testFormSchema),
});I have this schema.
And the following form (btw, using shadcn):
{questions.map((question, i) => (
<SwiperSlide key={i} className="h-[400px] w-[800px] px-11 py-12">
<div className="flex h-full w-full flex-col gap-8 rounded-3xl bg-background px-12 py-10">
<p className="text-xl font-extrabold">{question}</p>
<RadioGroup {...form.register(`questions.${i}`)}>
{translations.map((choice, choiceIndex) => (
<div key={choiceIndex} className="flex items-center gap-2">
<RadioGroupItem
value={choice}
id={`item-${i}-${choiceIndex}`}
{...form.register(`questions`)}
/>
<FormLabel htmlFor={`item-${i}-${choiceIndex}`}>
{choices[choiceIndex]}
</FormLabel>
</div>
))}
</RadioGroup>
<div className="text-sm font-bold text-accent">
{form.formState.errors.questions &&
form.formState.errors.questions[i]?.message}
</div>
</div>
</SwiperSlide>
))}The problem is that I can't choose any other value except for "always".
You can see it in the first image.
And I have to always choose "always", the first option, then it won't throw errors.