Merge pull request #103 from rumeshudash/set-error-in-on-submit

vantezzen · Oct 5, 2024 · 024ff15 · 024ff15
2 parents 19a6cae + 239f600
commit 024ff15
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -574,9 +574,10 @@ The preferred way is to use the `onSubmit` prop. This will be called when the fo
 
 ```tsx
 <AutoForm
-  onSubmit={(data) => {
+  onSubmit={(data, { setError }) => {
     // Do something with the data
     // Data is validated and coerced with zod automatically
+    // You can use setError to set errors for the fields
   }}
 />
 ```

diff --git a/src/components/ui/auto-form/index.tsx b/src/components/ui/auto-form/index.tsx
@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
 
 import AutoFormObject from "./fields/object";
-import { Dependency, FieldConfig } from "./types";
+import { Dependency, FieldConfig, SubmitOptions } from "./types";
 import {
   ZodObjectOrWrapped,
   getDefaultValues,
@@ -47,7 +47,10 @@ function AutoForm<SchemaType extends ZodObjectOrWrapped>({
   values?: Partial<z.infer<SchemaType>>;
   onValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
   onParsedValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
-  onSubmit?: (values: z.infer<SchemaType>) => void;
+  onSubmit?: (
+    values: z.infer<SchemaType>,
+    options: SubmitOptions<z.infer<SchemaType>>
+  ) => void;
   fieldConfig?: FieldConfig<z.infer<SchemaType>>;
   children?:
     | React.ReactNode
@@ -68,7 +71,9 @@ function AutoForm<SchemaType extends ZodObjectOrWrapped>({
   function onSubmit(values: z.infer<typeof formSchema>) {
     const parsedValues = formSchema.safeParse(values);
     if (parsedValues.success) {
-      onSubmitProp?.(parsedValues.data);
+      onSubmitProp?.(parsedValues.data, {
+        setError: form.setError,
+      });
     }
   }
 

diff --git a/src/components/ui/auto-form/types.ts b/src/components/ui/auto-form/types.ts
@@ -1,18 +1,21 @@
-import { ControllerRenderProps, FieldValues } from "react-hook-form";
+import {
+  ControllerRenderProps,
+  FieldValues,
+  UseFormSetError,
+} from "react-hook-form";
 import * as z from "zod";
 import { INPUT_COMPONENTS } from "./config";
 
 export type FieldConfigItem = {
   description?: React.ReactNode;
   inputProps?: React.InputHTMLAttributes<HTMLInputElement> &
-  React.TextareaHTMLAttributes<HTMLTextAreaElement> &
-  {
-    showLabel?: boolean;
-  };
+    React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+      showLabel?: boolean;
+    };
   label?: string;
   fieldType?:
-  | keyof typeof INPUT_COMPONENTS
-  | React.FC<AutoFormInputComponentProps>;
+    | keyof typeof INPUT_COMPONENTS
+    | React.FC<AutoFormInputComponentProps>;
 
   renderParent?: (props: {
     children: React.ReactNode;
@@ -22,8 +25,8 @@ export type FieldConfigItem = {
 export type FieldConfig<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
   // If SchemaType.key is an object, create a nested FieldConfig, otherwise FieldConfigItem
   [Key in keyof SchemaType]?: SchemaType[Key] extends object
-  ? FieldConfig<z.infer<SchemaType[Key]>>
-  : FieldConfigItem;
+    ? FieldConfig<z.infer<SchemaType[Key]>>
+    : FieldConfigItem;
 };
 
 export enum DependencyType {
@@ -43,9 +46,9 @@ type BaseDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
 export type ValueDependency<SchemaType extends z.infer<z.ZodObject<any, any>>> =
   BaseDependency<SchemaType> & {
     type:
-    | DependencyType.DISABLES
-    | DependencyType.REQUIRES
-    | DependencyType.HIDES;
+      | DependencyType.DISABLES
+      | DependencyType.REQUIRES
+      | DependencyType.HIDES;
   };
 
 export type EnumValues = readonly [string, ...string[]];
@@ -76,3 +79,7 @@ export type AutoFormInputComponentProps = {
   zodItem: z.ZodAny;
   className?: string;
 };
+
+export type SubmitOptions<SchemaType extends z.infer<z.ZodObject<any, any>>> = {
+  setError: UseFormSetError<SchemaType>;
+};