使用 formik 进行复杂的嵌套数组验证

Question

我已经查找过与此相关的任何类似问题，但一无所获。基本上我使用 formik 来管理测验的问题。我正在使用 FieldArray 动态添加问题文本框和可能的答案。我目前正在努力验证嵌套值。这是我的初始值和验证函数。

  const validate = (fields: QuestionFields) => {
    const errors: any = {};
    if (!errors.questions) {
      errors.questions = [];
    }
    fields.questions.forEach((q, i) => {
      if (!q.questionText) {
        errors.questions[i] = {
          questionText: 'A question is required.',
          answers: '',
        };
      }

      const isValid = q.answers.some((a) => a.text && a.isCorrectChoice);
      if (!isValid) {
      }
    });

    return errors;
  };

  const question = {
    questionText: '',
    questionImage: '',
    answers: [
      {
        text: '',
        isCorrectChoice: false,
      },
      {
        text: '',
        isCorrectChoice: false,
      },
      {
        text: '',
        isCorrectChoice: false,
      },
      {
        text: '',
        isCorrectChoice: false,
      },
    ],
  };

  const initialValues: QuestionFields = {
    questions: [question],
  };

主要问题是如何检查是否为每个问题提供了答案。也就是说，当用户没有为答案数组内的

text

输入任何文本时，如何将其添加到错误对象中，以检查每个问题答案数组是否有一些文本并且不为空。然后我想通过注入的

errors

对象在渲染道具中使用这个错误对象。

我尝试了几种方法，但当我添加新问题时，我不断收到错误。

提前致谢。

Answer 1

你可以试试这个

fields.questions.forEach((q, i) => {
  if (!q.questionText) {
    errors[`questions[$[i]]`]["questionText"] = "A question is required.";
  }

  const isValid = q.answers.some((a) => a.text && a.isCorrectChoice);
  if (!isValid) {
    errors[`questions[$[i]]`]["answers"] = "Atleast one correct answer is required";

  }
});

您可以像这样访问此错误消息

errors[`options[${index}]`]['questionText/answer']