Msw

In this article, I will show you how to handle form errors using React, Zod, Formik. You will learn how to create a form that supports both create and edit operations, how to fetch data for dynamic parts of the form with loading and error handling, how to validate the form using Zod, how to mock server errors using MSW, how to use Formik to manage the form state and submission. The form will also have features such as disabling during submission, displaying field errors, validating initial values when editing, and validating submit input when submitting. I will also cover some of the edge cases and best practices for form error handling with unit tests.

Periodically few inputs are related to each other, and options values inside depend on the previous option from another select input. We could define all possible outcomes and filter out records, but this could be inefficient. Another issue is that we could not add/remove options till the new production update. To resolve this issue we can send a request for options values for the specific select input.