Validation of specific key inside formik's "FieldArray" array of objects with yup

Question

I am using in formik and rendering multiple forms based on the user input.

<FormikProvider value={formik}>
<form onSubmit={formik.handleSubmit}>
<FieldArray name="employeeInfo">
            <>
              {formik.values.employeeInfo.length > 0 &&
                formik.values.employeeInfo.map(
                  (employeeInfo: any, index: any) => (
                    <div className="person-panel" key={index}>


                         <PlainInput
                         {...all the other props }
                          name={`employeeInfo.${index}.name`}
                          question="Name"
                        />

                        <PlainInput
                         {...all the other props }
                          name={`employeeInfo.${index}.email`}
                          question="Email"
                        />
                    </div>
                  )
                )}
            </>
          </FieldArray>
          </form>
          </FormikProvider>

The issue I am facing is as of now my validationschema looks like

validationschema.js

export const validationSchemaLifeSummarySecond = Yup.object().shape({
  employeeInfo: Yup.array().of(
    Yup.object().shape({
     name: Yup.string()
    .typeError("Preencha este campo")
    .required("Preencha este campo"),

      email: Yup.string()
        .required("Este campo é obrigatório")
        .email("Formato de e-mail incorreto")
        .typeError("Formato de e-mail incorreto"),
    })
  ),
});

which works perfectly fine as every input rendered is validating the email, but now I have a new addition in it. I want all the email inside the objects to be unique, so lets say if there are 3 forms all different forms should have different emails (the names can be same). So, how can i add this feature to my validation schema as the normal test function wont perfectly here

Thanks !

Ahmet Emre Kilinc · Accepted Answer · 2022-09-16 10:57:28Z

1

You can add a custom unique method to your yup schema and use it like this:

Yup.addMethod(Yup.array, "unique", function (message, mapper = (a) => a) {
  return this.test("unique", message, function (list) {
    return list.length === new Set(list.map(mapper)).size;
  });
});

const validationSchemaLifeSummarySecond = Yup.object().shape({
  employeeInfo: Yup.array()
    .of(
      Yup.object().shape({
        name: Yup.string()
          .typeError("Preencha este campo")
          .required("Preencha este campo"),

        email: Yup.string()
          .required("Este campo é obrigatório")
          .email("Formato de e-mail incorreto")
          .typeError("Formato de e-mail incorreto")
      })
    )
    .unique("duplicate email", (a) => a.email)
});

answered Sep 16, 2022 at 10:57

Ahmet Emre Kilinc

7,05119 gold badges37 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naruto Over a year ago

however after my 1 email passes the test case in formik.errors I am getting <1 empty slot>, is there any way to remove this from errors object ?

Collectives™ on Stack Overflow

Validation of specific key inside formik's "FieldArray" array of objects with yup

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related