Using when with objects in array in Yup

user_10603880 0
Viewed 32

I have the following object:

const values = {
  people: [
    {
      name: "Mark",
      age: null
    },
    {
      name: "Shark",
      age: 31
    }
  ],
  isAgeRequired: false
};

When isAgeRequired flips to true, in my Yup schema I would like to make the age value for each object in the people array require.

I have the following yup schema definition, but right now it seems to validate successfully even if the above requirements are not met:

const validator = object({
  people: array(
    object({
      name: string().required(),
      age: number()
        .nullable()
        .when("isAgeRequired", {
          is: true,
          then: (schema) => schema.required()
        })
    })
  )
});
yup typescript javascript
1 Answers

The problem is that the parent context is not available in .when, so one way to get around this was to "lift" the .when condition so that it is declared at a level where isAgeRequired is a sibling like so:

// Declare the default person schema separately because I'll want to reuse it.
const person = {
    name: string().required(),
    age: number().nullable()
}

const validator = object({
  people: array(
    object(personSchema)
  ).when('isAgeRequired', (isAgeRequired, schema) => {
    if (isAgeRequired) {
     return array({
      ...personSchema,
      age: personSchema.age.required() // Override existing age rule and attach .required to it
     })
    }
    
    return schema;
  })
});
user_106038800
Related