GenericForm

README.md

@@ -101,6 +101,12 @@ Error boundaries occur by ErrorFallBack component
 
 
 
+## Generic form
+
+`yarn add react-hook-form`
+
+
+
 
 <a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
 

apps/react-practice-demo/src/app/app.tsx

@@ -25,6 +25,8 @@ import FormSubmition from './components/FormSubmition/FormSubmition';
 import HandleSubmitionError from './components/FormSubmition/HandleSubmissionError';
 import FormSubmissionClient from './components/FormSubmition/FormSubmissionClient';
 import DisplayPendingStateDuringFormSubmission from './components/FormSubmition/DisplayPendingstateForm';
+import GenericForm from './components/GenericForm/GenericForm';
+
 //import UserListfetch from './components/AsyncDataFetching/UserListFetch';
 
 // Lazy loading component
@@ -132,6 +134,9 @@ const App = () => {
                   <NavDropdown.Item as={Link} to="/DisplayPendingStateDuringFormSubmission">
                   Display Pending State During Form Submission
                   </NavDropdown.Item>
+                  <NavDropdown.Item as={Link} to="/GenericForm">
+                  Generic Form
+                  </NavDropdown.Item>
                 </NavDropdown>
                 <NavDropdown title="LazyLoading" id="basic-nav-dropdown">
                   <NavDropdown.Item as={Link} to="/Dashboard">
@@ -201,6 +206,7 @@ const App = () => {
             <Route path="/HandleSubmissionError" element={<HandleSubmitionError />} />
             <Route path="/FormSubmissionClient" element={<FormSubmissionClient />} />
             <Route path="/DisplayPendingStateDuringFormSubmission" element={<DisplayPendingStateDuringFormSubmission />} />
+            <Route path='/GenericForm' element={<GenericForm/>}/>
             <Route path="*" element={<h1>Not Found</h1>} />
           </Routes>
         </Container>

apps/react-practice-demo/src/app/components/FormSubmition/DisplayPendingStateForm.tsx

@@ -1,36 +1,29 @@
-
-import { useFormStatus } from "react-dom";
+import { useFormStatus } from 'react-dom';
 
 export default function DisplayPendingStateDuringFormSubmission() {
-
-    const Buttons = () => {  
-        const { pending } = useFormStatus();
-        return (
-            <button type="submit" disabled={pending}>
-                {pending ? "Submitting..." : "Submit"}
-            </button>
-        );
-    }
-
-    const handleSubmit = async (formData: any) => {
-        const name = formData.get('name');
-        console.log(name);
-        // Simulate a network request
-        await new Promise(resolve => setTimeout(resolve, 2000));
-
-    }
+  const Buttons = () => {
+    const { pending } = useFormStatus();
+    return (
+      <button type="submit" disabled={pending}>
+        {pending ? 'Submitting...' : 'Submit'}
+      </button>
+    );
+  };
 
+  const handleSubmit = async (formData: any) => {
+    const name = formData.get('name');
+    console.log(name);
+    // Simulate a network request
+    await new Promise((resolve) => setTimeout(resolve, 2000));
+  };
 
   return (
-
-      <form action={handleSubmit}>
-        <div className="form-group">
-           Display a pending state during form submission
-        </div>
-        <input name="name" />
-        <Buttons></Buttons>
-      </form>
-
+    <form action={handleSubmit}>
+      <div className="form-group">
+        Display a pending state during form submission
+      </div>
+      <input name="name" />
+      <Buttons></Buttons>
+    </form>
   );
 }
-

apps/react-practice-demo/src/app/components/FormSubmition/FormSubmition.tsx

@@ -9,17 +9,20 @@ export default function FormSubmition() {
         console.log(name, email, message);
     }
 
-    const saveDraft = async (formData: any) => {
+    const saveDraft = async (formData: FormData) => {
         const name = formData.get('name');
         const email = formData.get('email');
         const message = formData.get('message');
         console.log(name, email, message);
     }
 
+
+
+
     return(
         <div>
             <h1>Handling multiple submission types</h1>
-            <form action={handleSubmit}>
+            <form action={handleSubmit} noValidate>
                 <div className="form-group">
                     <label htmlFor="name">Name</label>
                     <input 
@@ -42,6 +45,7 @@ export default function FormSubmition() {
                         name="email" 
                         placeholder="Enter email" 
                         pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
+
                         title="Enter a valid email address"
                         required
                     />

apps/react-practice-demo/src/app/components/GenericForm/GenericForm.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+
+interface FormInput {
+  name: string;
+  email: string;
+  phone: string;
+}
+
+const GenericForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<FormInput>();
+
+  const onSubmit = (data:any) => {
+    console.log(JSON.stringify(data));
+    reset();
+  };
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit(onSubmit)} noValidate>
+        <div>
+          <label>Name:</label>
+          <input
+            type="text"
+            {...register('name', { required: 'Name is required' })}
+          />
+          {errors.name && <p style={{ color: 'red' }}>{errors.name.message}</p>}
+        </div>
+
+        <div>
+          <label>Email:</label>
+          <input
+            type="email"
+            {...register('email', {
+              required: 'Email is required',
+              pattern: {
+                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+                message: 'Enter a valid email',
+              },
+            })}
+          />
+          {errors.email && (
+            <p style={{ color: 'red' }}>{errors.email.message}</p>
+          )}
+        </div>
+        <div>
+            <label> Phone:  </label>
+            <input type="tel" {...register("phone",
+            {
+                required: 'Phone number is required',
+                pattern: {
+                    value: /^\d{10}$/,
+                    message: 'Enter a valid 10-digit phone number',
+                },
+            })}/>
+        </div>
+        <div>
+        <button type="submit">Submit</button>
+        </div>  
+      </form>
+    </div>
+  );
+};
+
+export default GenericForm;

package.json

@@ -18,6 +18,7 @@
     "react-bootstrap": "^2.10.9",
     "react-dom": "19.0.0",
     "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.59.0",
     "react-redux": "^9.2.0",
     "react-router-dom": "^7.1.5"
   },

yarn.lock

@@ -9451,6 +9451,11 @@ react-error-boundary@^6.0.0:
   dependencies:
     "@babel/runtime" "^7.12.5"
 
+react-hook-form@^7.59.0:
+  version "7.59.0"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.59.0.tgz#69e7ebc4db933f7aa0ef0973ec8e09f299e5f24e"
+  integrity sha512-kmkek2/8grqarTJExFNjy+RXDIP8yM+QTl3QL6m6Q8b2bih4ltmiXxH7T9n+yXNK477xPh5yZT/6vD8sYGzJTA==
+
 react-is@^16.13.1, react-is@^16.3.2:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"