1719: Adds option to clear form after submission

Author: Ruben van Leeuwen

frontend/packages/pydantic-forms/src/components/render/RenderForm.tsx

@@ -7,6 +7,8 @@
  */
 import React from 'react';
 
+import Link from 'next/link';
+
 import { componentMatcher } from '@/components/componentMatcher';
 import Footer from '@/components/form/Footer';
 import RenderFormErrors from '@/components/render/RenderFormErrors';
@@ -27,7 +29,14 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
         headerComponent,
         skipSuccessNotice,
         loadingComponent,
+        clearForm,
     } = contextProps;
+    const {
+        formRenderer,
+        footerRenderer,
+        componentMatcher: customComponentMatcher,
+        resetAfterSubmit,
+    } = config || {};
 
     const LoadingComponent = loadingComponent ?? (
         <div>Formulier aan het ophalen...</div>
@@ -42,20 +51,22 @@ const RenderForm = (contextProps: PydanticFormContextProps) => {
     }
 
     if (isFullFilled) {
+        if (resetAfterSubmit) {
+            clearForm();
+        }
+
         if (skipSuccessNotice) {
             return <></>;
         }
 
         return (
-            <div>{successNotice ?? 'Je inzending is succesvol ontvangen'}</div>
+            <div>
+                {successNotice ?? 'Je inzending is succesvol ontvangen'}
+                <Link href="/">overnieuw</Link>
+            </div>
         );
     }
 
-    const {
-        formRenderer,
-        footerRenderer,
-        componentMatcher: customComponentMatcher,
-    } = config || {};
     const Renderer = formRenderer ?? FormRenderer;
     const FooterRenderer = footerRenderer ?? Footer;
 

frontend/packages/pydantic-forms/src/core/PydanticFormContextProvider.tsx

@@ -312,6 +312,12 @@ function PydanticFormContextProvider({
         isParsingSchema ||
         (customDataProvider ? isLoadingCustomData : false);
 
+    const clearForm = useCallback(() => {
+        setFormInputData([]);
+        setIsFullFilled(false);
+        setRawSchema(undefined);
+    }, []);
+
     const PydanticFormContextState = {
         // to prevent an issue where the sending state hangs
         // we check both the SWR hook state as our manual state
@@ -340,6 +346,7 @@ function PydanticFormContextProvider({
         setSaveToLeavePageInCurrentState,
         formKey,
         formIdKey,
+        clearForm,
     };
 
     return (

frontend/packages/pydantic-forms/src/types.ts

@@ -30,7 +30,6 @@ export interface PydanticFormInitialContextProps {
     footerComponent?: React.ReactNode;
     loadingComponent?: React.ReactNode;
     hasCardWrapper?: boolean;
-
     config: PydanticFormsContextConfig;
 }
 
@@ -75,6 +74,8 @@ export interface PydanticFormContextProps {
     config?: PydanticFormsContextConfig;
     formKey: string;
     formIdKey?: string;
+    clearForm: () => void;
+    resetAfterSubmit?: boolean;
 }
 
 export enum PydanticFormState {
@@ -307,6 +308,8 @@ export interface PydanticFormsContextConfig {
 
     // have an option to change the layout columns of fields
     formStructureMutator?: PydanticFormStructureMutator;
+
+    resetAfterSubmit?: boolean;
 }
 
 export type FormRenderer = React.JSXElementConstructor<{