Dynamic Product Configuration Form with Live Validation
Problem Description:
Imagine you are building a flexible e-commerce platform where product customization options can vary widely. Your task is to develop a React application that renders a dynamic form based on a provided configuration object. This form needs to support various input types, perform real-time client-side validation, and handle form submission with appropriate loading and feedback states.
Core Requirements:
Dynamic Form Rendering:
mockFormConfig provided in App.tsx.Real-time Client-side Validation:
validation rules defined in mockFormConfig.required, minLength, maxLength (for text), min, max (for numbers), and pattern (for regex).errorMessage from the validation rule should be used if provided; otherwise, a generic error message should be displayed.Form State Management:
Form Submission Handling:
setTimeout for 1-2 seconds).Constraints
useState, useEffect, etc.)./App.tsx file and /styles.css.