使用 Yup 進行 Formik FieldArray 嵌套對象驗證

Question

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

上面，我添加了一些我試圖弄清楚的問題的示例代碼。 我不確定如何將錯誤映射到 FieldArray 中的正確項目。

在示例中，有是/否單選按鈕，允許用戶指示他們是否有想要添加的食物。 如果他們選擇“是”，則會出現食品選項，他們必須至少選擇 1 種食品並輸入其到期日期才能完全驗證。

當用戶未能在文本字段中輸入到期日期時，我試圖添加“到期”驗證錯誤。 例如，如果我選擇“牛肉”並且沒有輸入到期日期，則錯誤會填充在 Formik 錯誤中。 但是，我不知道如何將該錯誤映射到正確的到期文本框。

任何幫助表示贊賞！

筆記：

驗證僅在單擊驗證按鈕時觸發

Answer 1

有codesandbox和代碼如下所示：

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

                <h3>Errors</h3>
                {JSON.stringify(errors, null, 2)}
              </pre>
              <Field
                name="food.hasFood"
                value
                type="radio"
                onChange={e => {
                  setFieldValue("food.hasFood", true);
                }}
              />{" "}
              Yes
              <Field
                name="food.hasFood"
                value={false}
                type="radio"
                onChange={e => {
                  setFieldValue("food.hasFood", false);
                }}
              />{" "}
              No
              {values.food.hasFood && (
                <FieldArray name="food.selected">
                  {arrayHelpers => {
                    return foodTypes.map(item => (
                      <div key={item}>
                        <Field
                          name={item}
                          value={item}
                          type="checkbox"
                          as={Checkbox}
                          checked={values.food.selected
                            .map(f => f.name)
                            .includes(item)}
                          onChange={e => {
                            if (e.target.checked) {
                              arrayHelpers.push({
                                name: e.target.value,
                                expiration: ""
                              });
                            } else {
                              const index = values.food.selected
                                .map(f => f.name)
                                .indexOf(e.target.value);
                              arrayHelpers.remove(index);
                            }
                          }}
                        />
                        {item}
                        {errors.food && touched.food && (
                          <p>
                            {Array.isArray(errors.food.selected)
                              ? ""
                              : errors.food.selected}
                          </p>
                        )}
                        {values.food.selected.map((selectedFood, index) => {
                          if (item === selectedFood.name) {
                            return (
                              <div>
                                <Field
                                  key={index}
                                  as={TextField}
                                  name={`food.selected[${index}].expiration`}
                                />
                                {console.log(errors)}
                                {errors.food && touched.food && (
                                  <p>
                                    {Array.isArray(errors.food.selected)
                                      ? errors.food.selected[index].expiration
                                      : errors.food.selected}
                                  </p>
                                )}
                              </div>
                            );
                          }
                          return null;
                        })}
                      </div>
                    ));
                  }}
                </FieldArray>
              )}
              <button
                type="button"
                onClick={() => {
                  validateForm();
                }}
              >
                Validate
              </button>
</Form>