What was used for working with multidimensional forms — for validation, what problems were encountered, how was testing done?

To work with multi-dimensional forms, validation libraries such as Yup, Joi, or custom solutions based on React Hook Form or Formik are often used. The main challenge is to correctly validate nested structures and dynamically changing fields.

Problems encountered:

• Validation of nested arrays and objects, especially when adding/removing elements dynamically.
• Asynchronous validation (e.g., checking data uniqueness on the server).
• Managing errors and displaying them for each field.

For testing, unit tests with Jest were used to verify the correctness of the validation schema for various data options, as well as end-to-end tests (Cypress) to check form behavior in the browser.

Example with Yup for nested structure:

const schema = yup.object().shape({
  users: yup.array().of(
    yup.object().shape({
      name: yup.string().required(),
      contacts: yup.array().of(
        yup.object().shape({
          type: yup.string().required(),
          value: yup.string().required(),
        })
      )
    })
  )
});

// Data validation
schema.validate(data).catch(err => console.log(err.errors));