FieldError component prop

Author: CodeStix

src/elements/FormError.tsx

@@ -15,10 +15,10 @@ export function FieldError<
         name: K;
         component?: C;
         transformer?: (error: Error) => React.ReactNode;
-    } & Omit<ElementProps<C>, "transformer" | "component" | "name" | "form">
+    } & Omit<ElementProps<C>, "transformer" | "component" | "name" | "form" | "children">
 ) {
-    const { form, component = React.Fragment, transformer } = props;
+    const { form, component = React.Fragment, transformer, ...rest } = props;
     const { error } = useListener(form, props.name);
     if (!error || typeof error === "object") return null;
-    return React.createElement(component, { children: String(transformer ? transformer(error as Error) : error) });
+    return React.createElement(component, { ...rest, children: String(transformer ? transformer(error as Error) : error) });
 }

testing/src/Fieldform.tsx

@@ -5,22 +5,42 @@ function Input(props: { value?: string; onChange?: (value: string) => void; styl
     return <input value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} style={props.style} />;
 }
 
+function validate(_: any) {
+    return {
+        email: "yikes"
+    };
+}
+
+function Error(props: { children: React.ReactNode }) {
+    return (
+        <p>
+            not epic:
+            <strong>{props.children}</strong>
+        </p>
+    );
+}
+
 export function FieldForm() {
-    const form = useForm({ email: "", firstName: "", gender: "male" as "male" | "female" });
+    const form = useForm({ email: "", firstName: "", gender: "male" as "male" | "female" }, validate);
+
+    function submit() {
+        console.log("this is epic");
+    }
 
     return (
-        <form>
+        <form onSubmit={form.handleSubmit(submit)}>
             <Field form={form} name="email" component="textarea" />
             <Field form={form} name="email" component="input" />
-            <Field form={form} name="email" component={Input} style={{ margin: "1em" }} />
-            <FieldError form={form} name="email" />
+            <Field form={form} name="email" component={Input} style={{ margin: "2em" }} />
+            <FieldError form={form} name="email" component={Error} />
             <Field form={form} name="gender" component="select">
                 <option value="male">male</option>
                 <option value="female">female</option>
             </Field>
             <pre>
                 <AnyListener form={form} render={() => JSON.stringify(form.values, null, 2)} />
             </pre>
+            <button type="submit">Submit</button>
         </form>
     );
 }