Submit helper

Author: CodeStix

CHANGELOG.md

@@ -19,4 +19,5 @@
 
 # 1.2.9 (03/04/2021)
 
--   Do not reset values on useForm state change, because this can cause confusion.
+-   Do not reset values on `useForm` state change, because this can cause confusion.
+-   `form.handleSubmit` helper function.

example/src/App.tsx

@@ -97,7 +97,6 @@ export function ArrayTest() {
     const [values, setValues] = useState({ name: "a list", items: ["asdf"] });
     const form = useForm(values);
     const arrayForm = useArrayForm(form, "items");
-
     return (
         <form
             onSubmit={(ev) => {
@@ -137,19 +136,11 @@ export function Form() {
 
     return (
         <form
-            onSubmit={async (ev) => {
-                ev.preventDefault();
-
-                await form.validate(); // Validate manually when validateOnChange is disabled.
-                if (form.error) return; // Do not submit if errors
-
-                form.setState({ isSubmitting: true }); // Set the form state (updates every component listening for state updates)
-
+            onSubmit={form.handleSubmit(async () => {
                 await new Promise((res) => setTimeout(res, 1000)); // Fake fetch
 
-                form.setState({ isSubmitting: false }); // Set the form state (updates every component listening for state updates)
                 form.setDefaultValues(form.values); // Set new default values
-            }}
+            })}
         >
             <div style={{ display: "grid", gridTemplateColumns: "60% 40%", gridTemplateRows: "100%", gap: "2em", margin: "2em" }}>
                 <VisualRender>
@@ -342,7 +333,7 @@ export function Form() {
                         form={form}
                         render={({ state, dirty }) => (
                             <div style={{ margin: "0.5em 0" }}>
-                                <button style={{ fontSize: "1.3em" }} disabled={state.isSubmitting || !dirty}>
+                                <button type="submit" style={{ fontSize: "1.3em" }} disabled={state.isSubmitting || !dirty}>
                                     Submit
                                 </button>
                                 <button

example/src/TestForm.tsx

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { FormInput, useForm } from "typed-react-form";
+
+export function TestForm() {
+    const [counter, setCounter] = useState(0);
+    const form = useForm({ firstName: "Stijn", lastName: "Rogiest" });
+
+    return (
+        <form>
+            <label>FirstName</label>
+            <FormInput form={form} name="firstName" />
+            <label>Lastname</label>
+            <FormInput form={form} name="lastName" />
+            <pre>Counter = {counter}</pre>
+            <button type="button" onClick={() => setCounter(counter + 1)}>
+                Increase
+            </button>
+        </form>
+    );
+}

src/form.ts

@@ -241,11 +241,13 @@ export class FormState<T, State = DefaultState, Error extends string = DefaultEr
      * @param notifyParent Should this form notify the parent form about this change?
      */
     public setValues(values: T, validate?: boolean, isDefault: boolean = false, notifyChild: boolean = true, notifyParent: boolean = true) {
+        // No set is used because this could cause problems with array keys, which must always be in the right order
         let keys = Object.keys(isDefault ? this.defaultValues : this.values);
         let newKeys = Object.keys(values);
         for (let i = 0; i < newKeys.length; i++) {
             if (!keys.includes(newKeys[i])) keys.push(newKeys[i]);
         }
+
         // Traverse backwards, so when removing array items, the whole array gets shifted in the right direction
         for (let i = keys.length - 1; i >= 0; i--) {
             let key = keys[i] as keyof T;
@@ -409,6 +411,34 @@ export class FormState<T, State = DefaultState, Error extends string = DefaultEr
         if (notifyParent) this.updateParentState();
     }
 
+    /**
+     * Creates a submit handler to pass to your `<form onSubmit={...}>`. The function executes the passed handler only if the form validates correctly.
+     * @param handler The handler to execute when this form contains no errors.
+     */
+    public handleSubmit(handler: (form: FormState<T, State, Error>) => void | Promise<void>) {
+        async function handle(this: FormState<T, State, Error>, ev: React.FormEvent<HTMLFormElement>) {
+            ev.preventDefault();
+
+            // Show helpful warning when using buttons to submit
+            if (process.env.NODE_ENV === "development") {
+                let buttons = Array.from((ev.target as HTMLFormElement).querySelectorAll("button"));
+                let noTypeButton = buttons.find((e) => !("type" in e.attributes));
+                if (noTypeButton) {
+                    console.error(
+                        `The submitted form contains a button without a type attribute. Please populate every button in your form with either type="button" or type="submit".`,
+                        noTypeButton
+                    );
+                }
+            }
+
+            if (!(await this.validate())) return;
+            this.setState({ ...this.state, isSubmitting: true });
+            await handler(this);
+            this.setState({ ...this.state, isSubmitting: false });
+        }
+        return handle.bind(this);
+    }
+
     /**
      * Listen for changes on a field, will trigger when value, defaultValue, dirty and error changes for a field. Make sure you pass its return value back to `ignore()` after you are done listening.
      * @param key The field to listen to.