How to handle an array of objects with toTypedSchema?

[tdebooij]

I am creating a form where the user can create simple multiple choice questions. The form consists of a question (string), and an array of answer options with a string for the text and a boolean to indicate whether it is a the correct answer. I struggled to get toTypedSchema to work nicely together with the useArrayField function.

I came up with the following working solution but I'm not convinced that this is the right way to it for two reasons:

1. Typing the useFieldArray generic with NonNullable<typeof values.questionOptions>[number] feels like an anti-pattern.
2. The array is validated immediately, instead of on blur/touch (like the question variable is).

In addition, I am also struggling to validate that exactly one question is marked as correct. But since I am using radio buttons with a default value set to the first array item it is not that urgent of an issue I guess.

Is there a better way to go about this?

const { meta, values, errors, defineComponentBinds } = useForm({
  validationSchema: toTypedSchema(
    yup.object({
      question: yup
        .string()
        .required(),
      questionOptions: yup
        .array()
        .of(
          yup.object({
            value: yup.string().required().default(""),
            isCorrect: yup.boolean().default(false),
          }),
        )
        .required()
        .default([
          { value: "", isCorrect: true },
          { value: "", isCorrect: false },
        ])
        .min(2)
        .compact(),
    }),
  ),
});

const question = defineComponentBinds("question");
const { push: addQuestionOption, fields: questionOptions } =
  useFieldArray<NonNullable<typeof values.questionOptions>[number]>(
    "questionOptions",
  );

Thanks!