I want some information about the best implementation for a scenario like this: I have a select and two date pickers. When I choose from the select (idRisk) the parameter PRESENT, the two dates must be required. If DateA is before the DateB then in the form I want to show a validation error. What is the best way to achieve this? I write this for pletation, but show this error = Error: Cyclic dependency, node was:"dateA"

validationSchema: Yup.object({
    idRisk: Yup.number().required(),

    dateB: Yup.mixed().when('idRisk', {
        is: Risk.PRESENT,
        then: Yup.mixed().required(),
        otherwise: Yup.mixed()
    }),

    dateA: Yup.mixed()
        .when('idRisk', {
            is: Risk.PRESENT,
            then: Yup.mixed().required(),
            otherwise: Yup.mixed()
        })
        .when(['dateA', 'dateB'], (dateA, dateB) => {
            if (dateA.isBefore(dateB)) return this.required()
        })
})

I want some information about the best implementation for a scenario like this: I have a select and two date pickers. When I choose from the select (idRisk) the parameter PRESENT, the two dates must be required. If DateA is before the DateB then in the form I want to show a validation error. What is the best way to achieve this? I write this for pletation, but show this error = Error: Cyclic dependency, node was:"dateA"

validationSchema: Yup.object({
    idRisk: Yup.number().required(),

    dateB: Yup.mixed().when('idRisk', {
        is: Risk.PRESENT,
        then: Yup.mixed().required(),
        otherwise: Yup.mixed()
    }),

    dateA: Yup.mixed()
        .when('idRisk', {
            is: Risk.PRESENT,
            then: Yup.mixed().required(),
            otherwise: Yup.mixed()
        })
        .when(['dateA', 'dateB'], (dateA, dateB) => {
            if (dateA.isBefore(dateB)) return this.required()
        })
})

• javascript
• formik
• yup

2 Answers 2

you cannot referrer the parameter ["dateA"] inside dateA:Yup.mixed().when() method, consider to use different approach, on example:

dateA: Yup.mixed()
  .when(["dateB"],
    (dateB, schema, node) => {
      if (node.value.isBefore(dateB))
        return this.required();
    }
  )

you can get dateA value from node.value

You have to add cyclic dependency at the end like this --

validationSchema: Yup.object({
idRisk: Yup.number().required(),

dateB: Yup.mixed().when('idRisk', {
    is: Risk.PRESENT,
    then: Yup.mixed().required(),
    otherwise: Yup.mixed()
}),

dateA: Yup.mixed()
    .when('idRisk', {
        is: Risk.PRESENT,
        then: Yup.mixed().required(),
        otherwise: Yup.mixed()
    })
    .when(['dateA', 'dateB'], (dateA, dateB) => {
        if (dateA.isBefore(dateB)) return this.required()
    })}, ['dateA'])