public commit

app/src/ui/routes/test/tests/react-hook-errors.tsx

@@ -0,0 +1,48 @@
+import { typeboxResolver } from "@hookform/resolvers/typebox";
+import { TextInput } from "@mantine/core";
+import { Type } from "@sinclair/typebox";
+import { useForm } from "react-hook-form";
+
+const schema = Type.Object({
+   example: Type.Optional(Type.String()),
+   exampleRequired: Type.String({ minLength: 2 })
+});
+
+export default function ReactHookErrors() {
+   const {
+      register,
+      handleSubmit,
+      watch,
+      formState: { errors }
+   } = useForm({
+      resolver: typeboxResolver(schema)
+   });
+   const onSubmit = (data) => console.log(data);
+
+   console.log(watch("example")); // watch input value by passing the name of it
+   console.log("errors", errors);
+
+   return (
+      /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
+      <form onSubmit={handleSubmit(onSubmit)}>
+         {/* register your input into the hook by invoking the "register" function */}
+         <TextInput defaultValue="test" {...register("example")} />
+
+         {/* @ts-ignore include validation with required or other standard HTML validation rules */}
+         <TextInput {...register("exampleRequired")} error={errors.exampleRequired?.message} />
+
+         <div>
+            <input type="submit" />
+         </div>
+
+         <div>
+            {Object.entries(errors).map(([key, value]) => (
+               <p key={key}>
+                  {/* @ts-ignore */}
+                  {key}: {value.message}
+               </p>
+            ))}
+         </div>
+      </form>
+   );
+}