From 35d46fb94f66bba4e9acf2a723a432ef24821b99 Mon Sep 17 00:00:00 2001
From: Karl Stein <karl.stein.pro@gmail.com>
Date: Mon, 15 Apr 2024 12:10:04 -1000
Subject: [PATCH] Added `getFormProps()` to `useForm()`

---
 src/components/Form.tsx | 12 ++----------
 src/useForm.ts          | 31 ++++++++++++++++++++++++-------
 test/useForm.test.ts    | 20 ++++++++++++++++++++
 3 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/src/components/Form.tsx b/src/components/Form.tsx
index 83a8dc9..8250591 100644
--- a/src/components/Form.tsx
+++ b/src/components/Form.tsx
@@ -22,19 +22,11 @@ function Form<V extends Values = Values, E = Error, R = any> (props: FormProps<V
     ...others
   } = props
 
-  const {
-    handleReset,
-    handleSubmit
-  } = context
+  const { getFormProps } = context
 
   return (
     <FormContext.Provider value={context}>
-      <form
-        method="post"
-        {...others}
-        onReset={handleReset}
-        onSubmit={handleSubmit}
-      >
+      <form {...getFormProps(others)}>
         {children}
       </form>
     </FormContext.Provider>
diff --git a/src/useForm.ts b/src/useForm.ts
index 764c6c2..2661c1e 100644
--- a/src/useForm.ts
+++ b/src/useForm.ts
@@ -78,6 +78,11 @@ export interface UseFormHook<V extends Values, E, R> extends FormState<V, E, R>
     name: string,
     props?: React.ComponentProps<Component>
   ): React.ComponentProps<Component>;
+  /**
+   * Returns form props.
+   * @param props
+   */
+  getFormProps (props?: React.ComponentProps<'form'>): React.ComponentProps<'form'>;
   /**
    * Returns field's initial value.
    * @param name
@@ -981,6 +986,17 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     return finalProps
   }, [formDisabled, getValue, handleBlur, handleChange, state])
 
+  /**
+   * Returns form props.
+   */
+  const getFormProps = useCallback((props: React.ComponentProps<'form'>): React.ComponentProps<'form'> => {
+    return {
+      ...props,
+      onReset: handleReset,
+      onSubmit: handleSubmit
+    }
+  }, [handleReset, handleSubmit])
+
   // Keep track of mount state.
   useEffect(() => {
     mountedRef.current = true
@@ -1040,6 +1056,7 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     clearTouchedFields,
     getButtonProps,
     getFieldProps,
+    getFormProps,
     getInitialValue,
     getValue,
     handleBlur,
@@ -1047,25 +1064,25 @@ function useForm<V extends Values, E = Error, R = any> (options: UseFormOptions<
     handleReset,
     handleSetValue,
     handleSubmit,
-    setInitialValues,
     load,
     removeFields,
     reset,
     setError,
     setErrors,
+    setInitialValues,
+    setTouchedField,
+    setTouchedFields,
     setValue,
     setValues,
     submit: debouncedValidateAndSubmit,
-    setTouchedField,
-    setTouchedFields,
     validate: debouncedValidate,
     validateField: debouncedValidateField,
     validateFields: debouncedValidateFields
   }), [state, formDisabled, clear, clearErrors, clearTouchedFields, getButtonProps,
-    getFieldProps, getInitialValue, getValue, handleBlur, handleChange, handleReset, handleSetValue,
-    handleSubmit, setInitialValues, load, removeFields, reset, setError, setErrors, setValue,
-    setValues, debouncedValidateAndSubmit, setTouchedField, setTouchedFields, debouncedValidate,
-    debouncedValidateField, debouncedValidateFields])
+    getFieldProps, getFormProps, getInitialValue, getValue, handleBlur, handleChange, handleReset,
+    handleSetValue, handleSubmit, setInitialValues, load, removeFields, reset, setError, setErrors,
+    setValue, setValues, debouncedValidateAndSubmit, setTouchedField, setTouchedFields,
+    debouncedValidate, debouncedValidateField, debouncedValidateFields])
 }
 
 export default useForm
diff --git a/test/useForm.test.ts b/test/useForm.test.ts
index ff4d39f..e6e8a20 100644
--- a/test/useForm.test.ts
+++ b/test/useForm.test.ts
@@ -387,6 +387,26 @@ describe('useForm()', () => {
     })
   })
 
+  describe('getFormProps()', () => {
+    const initialValues = { username: '' }
+    const { result } = renderHook(() => {
+      return useForm({
+        initialValues,
+        onSubmit: () => Promise.resolve(true)
+      })
+    })
+
+    describe('without custom props', () => {
+      it('should return default props', () => {
+        const props = result.current.getFormProps()
+        expect(props).toBeDefined()
+        expect(props.method).toBe('post')
+        expect(typeof props.onSubmit).toBe('function')
+        expect(typeof props.onReset).toBe('function')
+      })
+    })
+  })
+
   describe('getInitialValue(name)', () => {
     it('should return initial value', () => {
       const initialValues = { username: 'jalik' }