Formik FieldArray проверки вложенных объектов с помощью Yup - PullRequest
Новая
       6

Formik FieldArray проверки вложенных объектов с помощью Yup

0 голосов
/ 05 марта 2020

https://codesandbox.io/s/wonderful-brattain-928gd

Выше я добавил пример кода проблемы, которую пытаюсь выяснить. Я не уверен, как сопоставить ошибки с правильными элементами в FieldArray.

В этом примере есть переключатели да / нет, которые позволяют пользователю указать, есть ли у него продукты, которые он хочет добавить. Если они выбирают «да», появляются варианты питания, и они должны выбрать по крайней мере 1 из продуктов и ввести дату истечения срока их действия для полной проверки.

Я пытаюсь добавить ошибку проверки «истечения срока действия», когда пользователи не удается ввести срок действия в текстовом поле. Например, если я выберу «Говядина» и не введу дату истечения срока, ошибки заполняются ошибками Formik. Однако я не знаю, как сопоставить эту ошибку с правильным текстовым полем срока действия.

Любая помощь приветствуется!

Примечание:

Проверки запускаются только тогда, когда проверенная кнопка нажата

1 Ответ

0 голосов
/ 05 марта 2020

Существует коды и поле и код, показанный ниже n: 

<code><Form>
              <pre
                style={{
                  textAlign: "left"
                }}
              >
                <h3>Data</h3>
                {JSON.stringify(values, null, 2)}

                <h3>Errors</h3>
                {JSON.stringify(errors, null, 2)}
{setFieldValue ("food.hasFood", true); }} /> {""} Да {setFieldValue ("food.hasFood", false); }} /> {""} Нет {values.food.hasFood && ( {arrayHelpers => {return foodTypes.map (item => ( f.name) .includes (item)} onChange = {e => {if (e.target.checked) {arrayHelpers.pu sh ({name: e.target.value, expiration: ""}); } else {const index = values.food.selected .map (f => f.name) .indexOf (e.target.value); arrayHelpers.remove (индекс); }}} /> {item} {errors.food && touched.food && (

{Array.isArray (errors.food.selected)? "": errors.food.selected}

)} {значения. food.selected.map ((selectedFood, index) => {if (item === selectedFood.name) {return (
{console.log (errors)} {errors.food && touched.food && (

{Array.isArray (errors.food.selected)? errors.food.selected [index] .expiration: errors.food.selected}

)}
); } return null; })} )); }} )} {validateForm (); }}> Подтвердить
...