React, formik и Yup: множественный выбор с одним выбранным обязательно - PullRequest
Новая
       19

React, formik и Yup: множественный выбор с одним выбранным обязательно

0 голосов
/ 17 июня 2020

Я работаю над реакционным проектом и использую Formik и Yup для форм. Но у меня проблема с моей схемой проверки на Ага.

У меня 2 select. Если выбрано 0, вы не можете продолжить, вы можете только если выбран один из них.

Если клиент выбран или если выбран адрес, все в порядке, но если клиент и адрес не выбраны I не следует продолжать.

Если мой английский sh не подходит или вы не понимаете, не стесняйтесь сообщить мне.

Вот мой код, но он не работает моя схема проверки: 

const validationSchema = Yup.object().shape({
    program: Yup.object().shape({
        client: Yup.object().shape({
            id: Yup.number().min(0).when(
                "program.adresse.id",
                {
                    is: "",
                    then: Yup.number().min(0)
                        .required("A client or adresse should be selected"),
                }
            ),
        }),
        adresse: Yup.object().shape({
            id: Yup.number().min(0).when(
                "program.client.id",
                {
                    is: "",
                    then: Yup.number().min(0)
                        .required("An adresse or client should be selected"),
                }
            ),
        }),
})

И мои выбранные элементы: 

<Grid item xs={6}>
    <SelectItem
         label="Client"
         value={formik.program?.client?.id}
         name="program.client.id"
         handleChange={formik.handleChange}
         errorMessage={formik.errors.program?.client?.id}
         handleBlur={formik.handleBlur}
         touched={formik.touched.program?.client?.id}
         options={
             [{label: "", value: ""}].concat(
                  contextClient.clients.map((item) => {
                  return {label: item.content.designation.label, value: item.id}
                  })
             )
        }
   />
</Grid>

<Grid item xs={6}>
    <SelectItem
        label="Adresse"
        value={formik.program?.adresse?.id}
        name="program.adresse.id"
        handleChange={formik.handleChange}
        errorMessage={formik.errors.program?.adresse?.id}
        handleBlur={formik.handleBlur}
        touched={formik.touched.program?.adresse?.id}
        options={
           [{label: "", value: ""}].concat(
               contextAdresse.adresse.map((item) => {
               return {label: item.content.designation.label, value: item.id}
               })
           )
       }
    />
</Grid>

Я где-то читал, что мы не можем использовать этот метод между двумя объектами ... но я не уверен .

...