Next.js Discord

Discord Forum

react-hook-form and zod, radio group not working with enum

Unanswered
Brewer's Blackbird posted this in #help-forum
Open in Discord
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.

0 Replies