Fixed typos

Author: CodeStix

articles/Array-fields.md

@@ -26,14 +26,12 @@ function NotesList() {
             }}
         >
             <ArrayForm
-                parent={form}
+                form={form}
                 name="notes"
                 render={({ form, values, append, remove }) => (
                     <>
-                        {values.map((
-                            _,
-                            i // You SHOULD use index as key. See top for info.
-                        ) => (
+                        {/* You SHOULD use index as key. See top for info. */}
+                        {values.map((_, i) => (
                             <div key={i}>
                                 <FormInput form={form} name={i} />
                                 <button type="button" onClick={() => remove(i)}>
@@ -74,18 +72,20 @@ function ShoppingListForm() {
             <h2>Title</h2>
             <FormInput form={form} type="text" name="title" />
 
+            {/* Create an array child form for the 'items' field */}
             <h2>Items</h2>
-            <ArrayForm // Create an array child form for the 'items' field
-                parent={form}
+            <ArrayForm
+                form={form}
                 name="items"
                 render={({ form, values, append, remove }) => (
                     <>
                         {/* This only rerenders when the whole array changes. */}
 
                         {values.map((_, i) => (
-                            <ChildForm // Create a child form for each item in the array, because each array item is an object.
+                            // Create a child form for each item in the array, because each array item is an object.
+                            <ChildForm
                                 key={i} // You should index as key
-                                parent={form} // Pass the parent form
+                                form={form} // Pass the parent form
                                 name={i} // Pass the current index as the name
                                 render={(form) => (
                                     <div>
@@ -221,45 +221,3 @@ function AnswerForm() {
     );
 }
 ```
-
-✔️ **Fixed array field containing objects**
-
-```tsx
-function SettingsForm() {
-    const form = useForm({
-        settings: [
-            { name: "Enable email", value: true },
-            { name: "Enable notifications", value: false },
-        ],
-    });
-    return (
-        <form
-            onSubmit={(ev) => {
-                ev.preventDefault();
-                console.log("submit", form.values);
-            }}
-        >
-            <ChildForm // First child form is array
-                parent={form}
-                name="settings"
-                render={(form) =>
-                    form.values.map((_, i) => (
-                        <ChildForm // Second child form is object in array
-                            key={i}
-                            parent={form}
-                            name={i}
-                            render={(form) => (
-                                <div>
-                                    <p>{form.values.name}</p>
-                                    <FormInput form={form} name="value" type="checkbox" />
-                                </div>
-                            )}
-                        />
-                    ))
-                }
-            />
-            <button>Submit</button>
-        </form>
-    );
-}
-```

articles/Custom-input.md

@@ -6,6 +6,8 @@ If the default input types (FormInput, FormSelect ...) do not provide enough fun
 
 The following code resembles a custom input component that shows an error when needed, paints gray background when modified, gets disabled when submitting and shows its defaultValue as a placeholder. You can tweak this custom input further by implementing transformations for different input types, allowing `HTMLInputAttributes` etc.
 
+The builtin inputs are also just abstractions around the useListener hook.
+
 ```tsx
 function CustomInput<T>(props: { form: FormState<T>; name: keyof T; children?: React.ReactNode }) {
     const { value, error, dirty, setValue, state, defaultValue } = useListener(props.form, props.name);

articles/FormInput.md

@@ -152,4 +152,4 @@ Make sure you pass along a `value` too, this is the value that will be set when
 
 ---
 
-All of the input components are wrappers and abstractions around the [`useListener`](/docs/useListener) hook. Using this hook, you can create your own [custom inputs](/docs/Custom-inputs).
+All of the input components are wrappers and abstractions around the [`useListener`](/docs/useListener) hook. Using this hook, you can create your own [custom inputs](/docs/Custom-input).

articles/Getting-started.md

@@ -115,8 +115,8 @@ Tweak the above example to your desire by...
 
 -   [Reading more about `FormInput`](/docs/FormInput)
 -   [Implementing validation](/docs/Validation)
--   [Adding object fields](/docs/Object-fields)
--   [Adding array fields](/docs/Array-fields)
+-   [Using object fields](/docs/Object-fields)
+-   [Using array fields](/docs/Array-fields)
 -   [Toggling a field using a checkbox](/docs/Toggling-a-field)
 -   [Creating a component which shows the current form values in JSON](/docs/Live-json-component)
 -   [Creating a custom input like FormInput, FormSelect ...](/docs/Custom-input)

articles/Object-fields.md

@@ -28,7 +28,7 @@ function PersonForm() {
             {/* Input on root form */}
             <FormInput form={form} type="text" name="name" />
             <ChildForm
-                parent={form}
+                form={form}
                 name="info"
                 render={(form) => (
                     <>

articles/Toggling-a-field.md

@@ -51,7 +51,7 @@ function ToggleForm() {
             <FormInput form={form} name="location" type="checkbox" setNullOnUncheck />
             {/* ChildForm hides its contents when null/undefined by default */}
             <ChildForm
-                parent={form}
+                form={form}
                 name="location"
                 render={(form) => (
                     <>

pages/docs/test.tsx

@@ -1,5 +1,15 @@
 import React from "react";
-import { AnyListener, FormInput, useForm } from "typed-react-form";
+import {
+    AnyListener,
+    FormInput,
+    useForm,
+    ArrayForm,
+    ChildForm,
+    FormState,
+    useAnyListener,
+    ErrorMap,
+    FormError,
+} from "typed-react-form";
 
 function MyForm() {
     const form = useForm({ email: "" });
@@ -38,12 +48,177 @@ function MyForm2() {
     );
 }
 
+function ShoppingListForm() {
+    const form = useForm({
+        title: "My shopping list",
+        items: [{ name: "Coffee", amount: 1 }],
+    });
+
+    return (
+        <form
+            onSubmit={(ev) => {
+                ev.preventDefault();
+                console.log("submit", form.values);
+            }}
+        >
+            <h2>Title</h2>
+            <FormInput form={form} type="text" name="title" />
+
+            {/* Create an array child form for the 'items' field */}
+            <h2>Items</h2>
+            <ArrayForm
+                form={form}
+                name="items"
+                render={({ form, values, append, remove }) => (
+                    <>
+                        {/* This only rerenders when the whole array changes. */}
+
+                        {values.map((_, i) => (
+                            // Create a child form for each item in the array, because each array item is an object.
+                            <ChildForm
+                                key={i} // You should index as key
+                                form={form} // Pass the parent form
+                                name={i} // Pass the current index as the name
+                                render={(form) => (
+                                    <div>
+                                        {/* Everything here is type-checked! */}
+                                        <FormInput form={form} type="text" name="name" />
+                                        <FormInput form={form} type="number" name="amount" />
+                                        <button type="button" onClick={() => remove(i)}>
+                                            Remove
+                                        </button>
+                                    </div>
+                                )}
+                            />
+                        ))}
+
+                        {/* Use the append helper function to add an item to the array */}
+                        <button type="button" onClick={() => append({ name: "", amount: 1 })}>
+                            Add item
+                        </button>
+                    </>
+                )}
+            />
+            <button>Submit</button>
+        </form>
+    );
+}
+
+function ToggleForm() {
+    const form = useForm({
+        name: "codestix",
+        location: { long: 123, lat: 456 }, // Object field
+    });
+    return (
+        <form
+            onSubmit={(ev) => {
+                ev.preventDefault();
+                console.log("submit", form.values);
+            }}
+        >
+            <FormInput form={form} name="name" type="text" />
+
+            {/* Use the setNullOnUncheck prop. The value prop contains the value that is set when the box gets checked again, you can omit it to use the default value */}
+            <FormInput form={form} name="location" type="checkbox" setNullOnUncheck />
+            {/* ChildForm hides its contents when null/undefined by default */}
+            <ChildForm
+                form={form}
+                name="location"
+                render={(form) => (
+                    <>
+                        <p>Location lat/long</p>
+                        <FormInput form={form} name="lat" type="number" />
+                        <FormInput form={form} name="long" type="number" />
+                    </>
+                )}
+            />
+            <button>Submit</button>
+        </form>
+    );
+}
+
+// Take a form containing any values
+function FormJson(props: { form: FormState<any> }) {
+    // Listen for all changes on the form
+    const { values } = useAnyListener(props.form);
+    // Show the json representation of the values in the form
+    return <pre>{JSON.stringify(values, null, 2)}</pre>;
+}
+
+// Usage
+function ExampleForm() {
+    const form = useForm({ name: "John", age: 19 });
+    return (
+        <form
+            style={{ margin: "1em" }}
+            onSubmit={async (ev) => {
+                ev.preventDefault();
+                console.log("submit", form.values);
+            }}
+        >
+            <FormInput form={form} name="name" />
+            <FormInput type="number" form={form} name="age" />
+            {/* Use your component, pass the form */}
+            <FormJson form={form} />
+            {/* Using AnyListener, provides the same functionality */}
+            <AnyListener form={form} render={({ values }) => <pre>{JSON.stringify(values, null, 2)}</pre>} />
+            <button>Submit</button>
+        </form>
+    );
+}
+
+interface LoginRequest {
+    email: string;
+    password: string;
+}
+
+// May be async if needed
+function loginValidator(values: LoginRequest): ErrorMap<LoginRequest, string> {
+    // Example validator logic, the returned error object should follow the same structure as the values object.
+    return {
+        email: values.email.length < 10 ? "Email must be longer" : undefined,
+        password: values.password.length < 5 ? "Password must be longer" : undefined,
+    };
+}
+
+function FormExample() {
+    const form = useForm<LoginRequest>(
+        { email: "", password: "" },
+        loginValidator, // Pass loginValidator to useForm
+        true, // Validate on change (false by default)
+        false // Validate on mount (false by default)
+    );
+    return (
+        <form
+            onSubmit={(ev) => {
+                ev.preventDefault();
+                console.log("submit", form.values);
+            }}
+        >
+            <FormInput form={form} name="email" type="email" />
+            <FormError form={form} name="email" />
+            <FormInput form={form} name="password" type="password" />
+            <FormError form={form} name="password" />
+            {/* Listen for any change on the form, and disable the submit button when there is an error */}
+            <AnyListener form={form} render={(form) => <button disabled={form.error}>Submit</button>} />
+        </form>
+    );
+}
+
 export default function Testing() {
     return (
         <>
             <MyForm />
             <hr />
             <MyForm2 />
+            <hr />
+            <ShoppingListForm />
+            <hr />
+            <ToggleForm />
+            <hr />
+            <ExampleForm />
+            <hr />
+            <FormExample />
         </>
     );
 }