Блог

Я использую Formik Yup для создания формы с проверкой. У меня есть следующее начальное значение.

 const initialValue = {
  title: '',
  schedules: [
    {
      maxGame: '',
      bookingDuration: [],
      reservationSlots: [
        {
          from: null,
          to: null,
          increment: '',
          pricePerHours: [
            {
              guest: '',
              price: ''
            }
          ],
          pricePerGame: [
            {
              type: 'Child',
              price: ''
            }
          ]
        }
      ]
    }
  ]
};
 

Моя текущая схема yup:

 const schema = {Yup.object().shape({
              title: Yup.string()
                .min(2, 'Must be 2 characters or more')
                .required('Title is required'),
              schedules: Yup.array().of(
                  Yup.object().shape({
                    bookingDuration: Yup.array().when('maxGame', {
                      is: '',
                      then: Yup.array().min(1, 'Booking Duration is required'),
                      otherwise: Yup.array()
                    }),
                    maxGame: Yup.number().when('bookingDuration', {
                      is: (bookingDuration) => bookingDuration.length === 0,
                      then: Yup.number()
                        .min(1, 'Max Game must be greater than zero')
                        .required('Max Game is required either fill booking duration'),
                      otherwise: Yup.number()
                    }),
                    reservationSlots: Yup.array().of(
                        Yup.object().shape({
                          from: Yup.date().typeError('Invalid Time'),
                          to: Yup.date().typeError('Invalid Time'),
                          increment: Yup.string().required('Time Increment is required'),
                          pricePerGame: Yup.array().of(
                            Yup.object().shape({
                              type: Yup.string(),
                              price: Yup.string()
                                .when(['type'], {
                                  is: (type) => type,
                                  then: Yup.string().required('Price is required'),
                                }),
                            })
                          ),
                        },
                      )
                  },
                  [['bookingDuration', 'maxGame']])
                )
            })
        }
 

Я хочу получить следующую проверку:

1. Требуется либо один из вариантов бронирования, либо maxGame.
2. При бронировании номера.длина > 0, тогда должна потребоваться цена часов.
3. Если заполнена цена pricePerHours, то должно потребоваться бронирование.
4. Если maxGame!==», то должна потребоваться цена pricePerGame.
5. Если цена pricePerGame заполнена, то должна потребоваться maxGame.

Я могу применить проверку № 1, но для остальных не могу применить проверку. Не могли бы вы, пожалуйста, помочь мне в этом.