Question

0

52

Views

Always get undefined when using Yup.array().when() with two arrays

I have two arrays and I want at least one of them to be filled before submitting

My config:

initialValues={{
    images: [],
    current_images: [],
}}
validationSchema={Yup.object().shape(
    {
        images: Yup.array().when("current_images", {
            is: (current_images) => current_images.length === 0,
            then: Yup.array().min(1, "Pick at least one image"),
            otherwise: Yup.array(),
        }),
        current_images: Yup.array().when("images", {
            is: (images) => images.length === 0,
            then: Yup.array().min(1, "Pick at least one image"),
            otherwise: Yup.array(),
        }),
    },
    [["current_images", "images"]]
)}

Version:

"formik": "^2.2.9",
"yup": "^0.32.11"

Here is the error I got after clicking submit button:

How can I fix this problem ?

about 1 month ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-06-30T11:43:18.147Z

I found an alternative solution that using .test() instead of .when()

initialValues={{
    images: [],
    current_images: [],
}}
validationSchema={Yup.object().shape(
    {
        images: Yup.array().test(
            "images_required", // test name
            "Pick at lease one image", // error message
            function (item) {
                // item is the current field (images in this case)
                return item.length > 0 || this.parent.current_images.length > 0;
            }
        }),
        current_images: Yup.array().test(
            "current_images_required",
            "Pick at lease one image",
            function (item) {
                return item.length > 0 || this.parent.images.length > 0;
            }
        }),
    }
)}