[form] Reset form value in default reset handler

.changeset/great-cycles-mate.md

@@ -0,0 +1,5 @@
+---
+"@sjsf/form": minor
+---
+
+Reset form value in default reset handler

apps/docs/src/content/docs/api-reference/handlers.mdx

@@ -6,43 +6,49 @@ sidebar:
 
 ```typescript
 interface FormProps<T> {
-    /**
-     * Will be called when the form is submitted if `onSubmit` or `onSubmitError` is not provided
-     */
-	  onsubmit?: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
+  /**
+   * Will be called when the form is submitted if `onSubmit` or `onSubmitError` is not provided
+   */
+  onsubmit?: EventHandler<SubmitEvent, HTMLFormElement> | undefined | null;
 
-    /**
-     * The function to get the form data snapshot
-     * 
-     * The snapshot is used to validate the form and passed to
-     * `onSubmit` and `onSubmitError` handlers.
-     * 
-     * @default () => $state.snapshot(formValue)
-     */
-    getSnapshot?: () => SchemaValue | undefined
-    /**
-     * Submit handler
-     * 
-     * Will be called when the form is submitted and form data
-     * snapshot is valid
-     */
-    onSubmit?: (value: T | undefined, e: SubmitEvent) => void
-    /**
-     * Submit error handler
-     * 
-     * Will be called when the form is submitted and form data
-     * snapshot is not valid
-     */
-    onSubmitError?: (errors: Errors<E>, e: SubmitEvent, snapshot: SchemaValue | undefined) => void
-    /**
-     * Reset handler
-     * 
-     * Will be called on form reset.
-     * 
-     * By default it will clear the errors and set `isSubmitted` state to `false`.
-     * 
-     * @default () => { isSubmitted = false; errors.clear() }
-     */
-    onReset?: (e: Event) => void
+  /**
+   * The function to get the form data snapshot
+   * 
+   * The snapshot is used to validate the form and passed to
+   * `onSubmit` and `onSubmitError` handlers.
+   * 
+   * @default () => $state.snapshot(formValue)
+   */
+  getSnapshot?: () => SchemaValue | undefined
+  /**
+   * Submit handler
+   * 
+   * Will be called when the form is submitted and form data
+   * snapshot is valid
+   */
+  onSubmit?: (value: T | undefined, e: SubmitEvent) => void
+  /**
+   * Submit error handler
+   * 
+   * Will be called when the form is submitted and form data
+   * snapshot is not valid
+   */
+  onSubmitError?: (errors: Errors<E>, e: SubmitEvent, snapshot: SchemaValue | undefined) => void
+  /**
+   * Reset handler
+   *
+   * Will be called on form reset.
+   *
+   * By default it will clear the errors, set `isSubmitted` state to `false` and
+   * reset the form `value` to the `initialValue`.
+   *
+   * @default (e) => {
+   *   e.preventDefault();
+   *   isSubmitted = false;
+   *   errors.clear();
+   *   value = initialValue;
+   *  }
+   */
+  onReset?: (e: Event) => void
 }
 ```

apps/docs/src/content/docs/guides/_bind-form.svelte

@@ -5,10 +5,12 @@
 
   const schema: Schema = {
     type: "string",
+    minLength: 10,
   };
 
   const form = useCustomForm({
     schema,
+    initialValue: "initial",
     onSubmit: (v) => window.alert(v),
   });
 

packages/form/src/form/use-form.svelte.ts

@@ -72,9 +72,15 @@ export interface UseFormOptions<T, E> {
    *
    * Will be called on form reset.
    *
-   * By default it will clear the errors and set `isSubmitted` state to `false`.
+   * By default it will clear the errors, set `isSubmitted` state to `false` and
+   * reset the form `value` to the `initialValue`.
    *
-   * @default () => { isSubmitted = false; errors.clear() }
+   * @default (e) => {
+   *   e.preventDefault();
+   *   isSubmitted = false;
+   *   errors.clear();
+   *   value = initialValue;
+   *  }
    */
   onReset?: (e: Event) => void;
   schedulerYield?: SchedulerYield;
@@ -133,9 +139,14 @@ export function createForm<T, E>(
 
   const resetHandler = $derived(
     options.onReset ??
-      (() => {
+      ((e: Event) => {
+        e.preventDefault();
         isSubmitted = false;
         errors.clear();
+        value = merger.mergeFormDataAndSchemaDefaults(
+          options.initialValue as Value,
+          options.schema
+        );
       })
   );