validationSchema change depending on form values

❓Question

How can I change validationSchema depending on the state of my form?

The docType validation change depending on the value of my select.

I wanted to do this if validationSchema gave me the form props as arguments but it don’t.

Example:

        <Formik
          initialValues={{ planType: 'PRE' }}
          validationSchema={props => {
            const isCPF = props.values.docType === 'cpf'

            return yup.object().shape({
              docType: yup.string(),
              number: isCPF ? yup.string().cpf() : yup.string().cnpj()
            })
          }}
          onSubmit={loadPlanActivation}
          render={this.renderForm}
        />

I could solve this with a ref or adding a personal onChange to setState and be able to have the value but it does not seem natural.

[ankurjoshi54]

For anyone facing this issue, we can do something like

  <Formik
    initialValues={{ planType: 'PRE' }}
    validationSchema={() => yup.lazy((values) => {
      const isCPF = values.docType === 'cpf'

      return yup.object().shape({
        docType: yup.string(),
        number: isCPF ? yup.string().cpf() : yup.string().cnpj()
      })
    })}
    onSubmit={loadPlanActivation}
    render={this.renderForm}
  />

Basically, we can use

validationSchema={() => yup.lazy((values) => {
  // values is the formik.values object
  // return schema conditionally based on values object
})}

[weyert]

You can just use the Yup when? See: https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema