I have two strings of date start_date and end_date. Below have empty string as there initial value:
export interface FilterSchema {
start_date?: any;
end_date?: any;
}
const initialValues: FilterSchema = {
start_date: '',
end_date: '',
};
Initially they both are empty. But if one of them is selected, then other also needs to be selected. If none of them is selected then there is no need of validation. So I used yup for this in following way:
const filterSchema = yup.object().shape({
start_date: yup.string().when('end_date', {
is: value => value && value != '',
then: yup.string().required('Required'),
}),
end_date: yup.string().when('start_date', {
is: value => value && value != '',
then: yup.string().required('Required'),
}),
});
But I am getting error message:
Cyclic dependency, node was: "end_date"
I am using filterSchema in Formik:
<Formik
onSubmit={facilityFilter}
validationSchema={filterSchema}
....
Fields that depend on another field need to be constructed in the right order, i.e. If endDate depends on startDate then startDate needs to go first, however in your case you want to validate after everything is constructed. Yup isn't able to figure this out so it throws the cyclic dependency error. If you want to tell Yup to ignore the ordering you can add an array of field pairs to the second argument in the shape method
const filterSchema = yup.object().shape({
start_date: yup.string().when('end_date', {
is: value => value && value != '',
then: yup.string().required('Required'),
}),
end_date: yup.string().when('start_date', {
is: value => value && value != '',
then: yup.string().required('Required'),
}),
}, [["start_date", "end_date"]]);
It's not the best solution for dealing with cyclical dependencies as noted here by the creator of yup: https://github.com/jquense/yup/issues/720