Dynamic Javascript Form with Error Handling and Validation

One form to rule them all with React, Typescript, hooks, react-hook-form, material UI, and Yup.

Forms are a crucial part of most web application and is the predominant way users input and submit data. This means it often appears on multiple pages and components throughout an application.

The forms will likely contain many similar input fields and expected behaviors with regards to validation, type checking, form submission, and error handling.

All this repetitive code can increase technical debt and is much more difficult to create tests for.

The dynamic form solution I created makes it simple to reuse a form on different screens and views. The properties for each form are stored in an Object array and can be passed as props into the custom form component.

The form component uses Yup for form validation and react-hook-form to handle form submission and error-handling. Typescript is used for type checking, and material UI component library provides the form components and styles.

I hope it helps you

Dynamic form, Validation, Type checking, and Error handling.