CODEWITHSUNDEEP
javascriptreactjsformikyup
Rob Terrell
Rob Terrell

Reputation: 2562

Yup validation based on nested object within nested object

I currently have an object that looks like the following:

const initialValues = {
  created: {
    position: 1,
    name: 'created',
    type: 'timestamp',
    desc: 'The date and time the lead is created',
    mapping: {
      name: '',
      defaultValue: '',
      map: false
    }
  }
}

I would like the name within the mapping object to become required when the map value within the map object is set to a value of true. I have attempted this by doing the following:

const validationSchema = yup.object({
  created: yup.object().when('mapping.map', {
    is: true,
    then: yup.object({
      mapping: yup.object({
        name: yup.string().required('name is required')
      })
    })
  })
})

I believe I'm not tunneling enough in order to accurately set up the validation for the mapping object, any and all help/suggestions would be greatly appreciated.

Upvotes: 2

Views: 6802

Answers (1)

Rob Terrell
Rob Terrell

Reputation: 2562

I found the solution doing the following:

const validationSchema = yup.object({
  created: yup.object().shape({
    mapping: yup.object().shape({
      map: yup.boolean(),
      defaultValue: yup.string(),
      name: yup.string().when('map', {
        is: true,
        then: yup.string().required('name is required')
      })
    })
  })
})

Upvotes: 6

Related Questions