Formik FieldArray nested object validations with Yup

Question

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

Above, I have added some sample code of the problem I am trying to figure out. I am not sure how to map the errors to the correct items in the FieldArray.

In the example, there are yes/no radio buttons which allow a user to indicate whether they have foods they want to add. If they select 'yes', the food options appear and they must select at least 1 of the foods and enter its expiration date to fully validate.

I am trying to add an "expiration" validation error when the users fails to enter an expiration date in the text field. For example, if I select "Beef" and do not enter an expiration date, the errors populate in the Formik errors. However, I don't know how to map that error to the correct expiration text box.

Any help is appreciated!

Note:

Validations are only triggered when the validated button is clicked

aturan23 aturan23 · Accepted Answer · 2020-03-05T03:32:54

There is codesandbox and code shown belown:

<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>

Formik FieldArray nested object validations with Yup

1 Answers