Yup: .when() and reach() schema

[jjalonso]

Hi guys.

I have a form that is able to validate independently on onChange (individually) and also when clicking submit (full form).

Im using reach and validating field to field on onChange, but some schemas depend of others and it seem not to be working, any idea about how to use the yup interface for this?

See the example, im trying to validate emigrationYear (extracting it with reach() before) and it always receive _undefined_ on val parameter (in "is" function).

    country: yup
      .string()
      .label(' ')
      .required(),
    emigrationYear: yup
      .string()
      .label(' ')
      .when('country', {
        is: val => (val && val !== 'United Kingdom')
        then: yup
          .string()
          .label(' ')
          .required(),
        otherwise: yup
          .string()
          .label(' ')
          .notRequired(),
      }),

[beckerei]

I'm having the same problem, I created a small example:
https://runkit.com/beckerei/5cc07b3a0747780013a722ff

The first one has a nested schema, where the value inside the "is" function is undefined, but I expect it to output the value from required.

The second example has a flat hierarchy where val has the expected value.

[jquense]

@beckerei yes, you can only reference siblings and children, not ancestors, so something like when('../required') isn't supported currently

[beckerei]

Okay, nice I'm unable to read the docs 🤦‍♂

Writing a something custom with .test() won't work either (as this.parent will only give access to siblings). Can you think of a workaround for accessing ancestors in a nested schema? If not is it a planned feature, and how can we help with it?

Btw: great library 🚀

[jimjeffers]

I got around this by using .when on the parent object and returning the child schema as an array:

const validation = Yup.object().shape({
  flexibleLocation: Yup.bool(),
  location: Yup.object().when('flexibleLocation', (flexibleLocation: any, schema: Yup.ObjectSchema<any>) =>
    schema.shape({
      address1: flexibleLocation ? Yup.string() : Yup.string().required(),
      city: flexibleLocation ? Yup.string() : Yup.string().required(),
      zip: flexibleLocation ? Yup.string() : Yup.string().required(),
    })
  ),
  name: Yup.string().required(),
})

[immanuelrosal]

I got around this by using .when on the parent object and returning the child schema as an array:

const validation = Yup.object().shape({
  flexibleLocation: Yup.bool(),
  location: Yup.object().when('flexibleLocation', (flexibleLocation: any, schema: Yup.ObjectSchema<any>) =>
    schema.shape({
      address1: flexibleLocation ? Yup.string() : Yup.string().required(),
      city: flexibleLocation ? Yup.string() : Yup.string().required(),
      zip: flexibleLocation ? Yup.string() : Yup.string().required(),
    })
  ),
  name: Yup.string().required(),
})

You're a life saver! Been trying to figure this out for 2 days now! Thanks @jimjeffers!

[zmardil]

I got around this by using .when on the parent object and returning the child schema as an array:

const validation = Yup.object().shape({
  flexibleLocation: Yup.bool(),
  location: Yup.object().when('flexibleLocation', (flexibleLocation: any, schema: Yup.ObjectSchema<any>) =>
    schema.shape({
      address1: flexibleLocation ? Yup.string() : Yup.string().required(),
      city: flexibleLocation ? Yup.string() : Yup.string().required(),
      zip: flexibleLocation ? Yup.string() : Yup.string().required(),
    })
  ),
  name: Yup.string().required(),
})

Thank you!! so much.