Reset response at handleSubmit and reset method

Author: fabian-hiller

packages/solid/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to the library will be documented in this file.
 
+## vX.X.X (Month DD, YYYY)
+
+- Reset form response at `handleSubmit` and `reset` method
+  - Add `keepResponse` property to `Form` component
+  - Add `keepResponse` option to `handleSubmit` and `reset` method
+  - Refactor `reset` method
+
 ## v0.4.0 (November 02, 2022)
 
 - Add `clearResponse`, `hasField` and `hasFieldArray` method

packages/solid/src/components/Form.tsx

@@ -8,6 +8,7 @@ type FormProps<TFieldValues extends FieldValues> = Omit<
 > & {
   of: FormState<TFieldValues>;
   onSubmit: (values: TFieldValues, event: Event) => void | Promise<void>;
+  keepResponse?: boolean;
   shouldActive?: boolean;
   shouldTouched?: boolean;
   shouldDirty?: boolean;
@@ -26,7 +27,13 @@ export function Form<TFieldValues extends FieldValues>(
   const [local, options, others] = splitProps(
     props,
     ['of', 'onSubmit', 'children'],
-    ['shouldActive', 'shouldTouched', 'shouldDirty', 'shouldFocus']
+    [
+      'keepResponse',
+      'shouldActive',
+      'shouldTouched',
+      'shouldDirty',
+      'shouldFocus',
+    ]
   );
 
   // Return HTML form element and include handleSubmit in onSubmit

packages/solid/src/methods/handleSubmit.ts

@@ -4,6 +4,7 @@ import { getValues } from './getValues';
 import { validate } from './validate';
 
 type SubmitOptions = Partial<{
+  keepResponse: boolean;
   shouldActive: boolean;
   shouldTouched: boolean;
   shouldDirty: boolean;
@@ -29,14 +30,20 @@ export function handleSubmit<TFieldValues extends FieldValues>(
 
     // Destructure options and set default values
     const {
+      keepResponse = false,
       shouldActive = true,
       shouldTouched = false,
       shouldDirty = false,
       shouldFocus = true,
     } = options;
 
-    // Increase submit count and set submitted and submitting to "true"
     batch(() => {
+      // Reset response if it is not to be kept
+      if (!keepResponse) {
+        form.internal.setResponse({});
+      }
+
+      // Increase submit count and set submitted and submitting to "true"
       form.internal.setSubmitCount((submitCount) => submitCount + 1);
       form.internal.setSubmitted(true);
       form.internal.setSubmitting(true);

packages/solid/src/methods/reset.ts

@@ -24,6 +24,7 @@ type ResetOptions<
 > = Partial<{
   initialValue: [FieldPathValue<TFieldValues, TFieldName>];
   initialValues: DeepPartial<TFieldValues>;
+  keepResponse: boolean;
   keepSubmitCount: boolean;
   keepSubmitted: boolean;
   keepValues: boolean;
@@ -68,8 +69,9 @@ export function reset<
   const {
     initialValue,
     initialValues,
-    keepSubmitCount = resetSingleField,
-    keepSubmitted = resetSingleField,
+    keepResponse = false,
+    keepSubmitCount = false,
+    keepSubmitted = false,
     keepValues = false,
     keepDirtyValues = false,
     keepErrors = false,
@@ -165,6 +167,11 @@ export function reset<
 
     // Reset form state if necessary
     if (resetEntireForm) {
+      // Reset response if it is not to be kept
+      if (!keepResponse) {
+        form.internal.setResponse({});
+      }
+
       // Reset form if values should not be kept
       if (!keepValues) {
         form.element?.reset();

packages/website/src/routes/api/Form.mdx

@@ -15,6 +15,7 @@ HTML form element that simplifies form submission and disables the browser's def
 <Form
   of={…}
   onSubmit={…}
+  keepResponse={…}
   shouldActive={…}
   shouldTouched={…}
   shouldDirty={…}
@@ -28,6 +29,7 @@ HTML form element that simplifies form submission and disables the browser's def
 
 - `of` <Property {...properties.of} />
 - `onSubmit` <Property {...properties.onSubmit} />
+- `keepResponse` <Property {...properties.keepResponse} />
 - `shouldActive` <Property {...properties.shouldActive} />
 - `shouldTouched` <Property {...properties.shouldTouched} />
 - `shouldDirty` <Property {...properties.shouldDirty} />
@@ -38,6 +40,8 @@ HTML form element that simplifies form submission and disables the browser's def
 
 ### Explanation
 
+Before executing the `onSubmit` function, the `response` of the form is reset. To change this behavior you can set the `keepResponse` property to `true`.
+
 Errors thrown by the `onSubmit` function are made available via the `response` property of the <A href="/api/ModularForm">`ModularForm`</A> object to display them to your user.
 
 By default, the `onSubmit` function validates and provides only the values of active fields via the `values` parameter and focuses on the first field with an error during validation if one occurs. To change this behavior you can set the `shouldActive` and `shouldFocus` property to `false`.
@@ -71,6 +75,10 @@ export const properties = {
       return: ['void', { type: 'custom', name: 'Promise', generics: ['void'] }],
     },
   },
+  keepResponse: {
+    type: 'boolean',
+    defaultValue: { type: 'boolean', value: false },
+  },
   shouldActive: {
     type: 'boolean',
     defaultValue: { type: 'boolean', value: true },

packages/website/src/routes/api/handleSubmit.mdx

@@ -27,13 +27,16 @@ It is recommended to execute the `handleSubmit` method directly in the `onSubmit
 - `form` <Property {...properties.form} />
 - `submitAction` <Property {...properties.submitAction} />
 - `options` <Property {...properties.options} />
+  - `keepResponse` <Property {...properties.keepResponse} />
   - `shouldActive` <Property {...properties.shouldActive} />
   - `shouldTouched` <Property {...properties.shouldTouched} />
   - `shouldDirty` <Property {...properties.shouldDirty} />
   - `shouldFocus` <Property {...properties.shouldFocus} />
 
 ### Explanation
 
+Before executing the `submitAction` function, the `response` of the `form` is reset. To change this behavior you can set the `keepResponse` property to `true`.
+
 Errors thrown by the `submitAction` function are made available via the `response` property of the <A href="/api/ModularForm">`ModularForm`</A> object to display them to your user.
 
 By default, the `submitAction` function provides only the values of active fields via the `values` parameter. To change this behavior you can set the `shouldActive` property to `false`.
@@ -77,6 +80,10 @@ export const properties = {
     type: 'object',
     defaultValue: { type: 'object', entries: [] },
   },
+  keepResponse: {
+    type: 'boolean',
+    defaultValue: { type: 'boolean', value: false },
+  },
   shouldActive: {
     type: 'boolean',
     defaultValue: { type: 'boolean', value: true },

packages/website/src/routes/api/reset.mdx

@@ -30,6 +30,7 @@ reset(form, name, options);
 - `options` <Property {...properties.options} />
   - `initialValues` <Property {...properties.initialValues} />
   - `initialValue` <Property {...properties.initialValue} />
+  - `keepResponse` <Property {...properties.keepResponse} />
   - `keepSubmitCount` <Property {...properties.keepSubmitCount} />
   - `keepSubmitted` <Property {...properties.keepSubmitted} />
   - `keepValues` <Property {...properties.keepValues} />
@@ -48,9 +49,9 @@ When you reset several fields, you can specify `initialValues` that get shallow
 
 When you reset a single field, you can specify a new `initialValue` that override the initial value you may set in the `initialValues` property of the <A href="/api/createForm">`createForm`</A> primitive.
 
-By default, the reactive `submitCount` and `submitted` state of the `form` is reset when the entire form is reset. To change this behavior you can set `keepSubmitCount` and/or `keepSubmitted` to `true` or `false`.
+By default, the reactive `response`, `submitCount` and `submitted` state of the `form` is reset when the entire form is reset. To change this behavior you can set `keepResponse`, `keepSubmitCount` and/or `keepSubmitted` to `true`.
 
-By default, the value, error, touched and dirty state of each field and field array are reset. To change this behavior you can set `keepValues`, `keepDirtyValues`, `keepErrors`, `keepErrors` and/or `keepDirty` to `true`.
+By default, the `value`, `error`, `touched` and `dirty` state of each field and field array are reset. To change this behavior you can set `keepValues`, `keepDirtyValues`, `keepErrors`, `keepErrors` and/or `keepDirty` to `true`.
 
 export const properties = {
   form: {
@@ -96,19 +97,17 @@ export const properties = {
       'undefined',
     ],
   },
+  keepResponse: {
+    type: 'boolean',
+    defaultValue: { type: 'boolean', value: false },
+  },
   keepSubmitCount: {
     type: 'boolean',
-    defaultValue: [
-      { type: 'boolean', value: true },
-      { type: 'boolean', value: false },
-    ],
+    defaultValue: [{ type: 'boolean', value: false }],
   },
   keepSubmitted: {
     type: 'boolean',
-    defaultValue: [
-      { type: 'boolean', value: true },
-      { type: 'boolean', value: false },
-    ],
+    defaultValue: [{ type: 'boolean', value: false }],
   },
   keepValues: {
     type: 'boolean',