I'm trying to create a dynamic form with following validation -

1. User must choose a minimum of 2 choices.
2. Each choice must be a non-empty string.

I'm trying to achieve it using Yup for form validation.

Here is the codesandbox link - https://codesandbox.io/s/dynamic-form-using-react-hook-form-forked-mo4p79

I'm facing following Issues here -

1. The error "Minimum of 2 choices are required" does not go away even when user has created 3 choices.

2. First choice input is not getting validated.

I've created following formSchema to enforce minimum 2 elements and non-empty input -

export const formSchema = yupResolver(
  yup
    .object({
      choices: yup
        .array(
          yup.object().shape({
            value: yup.string().required("This field is required.")
          })
        )
        .min(2, "Minimum of 2 choices are required!")
    })
    .required()
);

It validates fine after each time clicking the submit button But it is not validating dynamically.

CodePudding user response：

I've solved it myself. The issue was occurring because of using external validation library Yup.

It is mentioned in documentation that currently rules for validation of fieldArray are applicable to built-in validation only.

Important: This is only applicable to built-in validation only

Here is the link to the fixed sandbox - CodeSandBox