Merge pull request #115 from aon/feat/add-action-config-from-form

feat: add action support from Form config

README.md

@@ -397,7 +397,10 @@ If you're using a GET request formData is not available on the request so you ca
 - `submitHandlers`: an object containing two properties:
   - `onValid`: can be passed into the function to override the default behavior of the `handleSubmit` success case provided by the hook.
   - `onInvalid`: can be passed into the function to override the default behavior of the `handleSubmit` error case provided by the hook.
-- `submitConfig`: allows you to pass additional configuration to the `useSubmit` function from Remix, such as `{ replace: true }` to replace the current history entry instead of pushing a new one. The `submitConfig` trumps `Form` props from Remix. But the `Form` props are used if no submitConfig is provided.
+- `submitConfig`: allows you to pass additional configuration to the `useSubmit` function from Remix, such as `{ replace: true }` to replace the current history entry instead of pushing a new one. The `submitConfig` trumps `Form` props from Remix. The following props will be used from `Form` if no submitConfig is provided:
+  - `method`
+  - `action`
+  - `encType`
 - `submitData`: allows you to pass additional data to the backend when the form is submitted.
 - `fetcher`: if provided then this fetcher will be used to submit data and get a response (errors / defaultValues) instead of Remix's `useSubmit` and `useActionData` hooks.
 

src/hook/index.tsx

@@ -88,11 +88,18 @@ export const useRemixForm = <T extends FieldValues>({
   // Submits the data to the server when form is valid
   const onSubmit = useMemo(
     () =>
-      (data: T, e: any, formEncType?: FormEncType, formMethod?: FormMethod) => {
+      (
+        data: T,
+        e: any,
+        formEncType?: FormEncType,
+        formMethod?: FormMethod,
+        formAction?: string,
+      ) => {
         setIsSubmittingNetwork(true);
         setIsSubmittedSuccessfully(true);
         const encType = submitConfig?.encType ?? formEncType;
         const method = submitConfig?.method ?? formMethod ?? "post";
+        const action = submitConfig?.action ?? formAction;
         const submitPayload = { ...data, ...submitData };
         const formData =
           encType === "application/json"
@@ -102,6 +109,7 @@ export const useRemixForm = <T extends FieldValues>({
           ...submitConfig,
           method,
           encType,
+          action,
         });
       },
     [submit, submitConfig, submitData, stringifyAllValues],
@@ -199,11 +207,12 @@ export const useRemixForm = <T extends FieldValues>({
     () => (e?: FormEvent<HTMLFormElement>) => {
       const encType = e?.currentTarget?.enctype as FormEncType | undefined;
       const method = e?.currentTarget?.method as FormMethod | undefined;
+      const action = e?.currentTarget?.action;
       const onValidHandler = submitHandlers?.onValid ?? onSubmit;
       const onInvalidHandler = submitHandlers?.onInvalid ?? onInvalid;
 
       return methods.handleSubmit(
-        (data, e) => onValidHandler(data, e, encType, method),
+        (data, e) => onValidHandler(data, e, encType, method, action),
         onInvalidHandler,
       )(e);
     },