Make field level error work

src/components/ContactForm/ContactForm.tsx

@@ -27,7 +27,7 @@ interface ContactFormInput {
 export function ContactForm(props: ContactFormProps) {
   const { inputs, button } = props;
   const [captchaToken, setCaptchaToken] = useState<string | null>(null);
-  const { message, onSubmit } = useContactForm(captchaToken);
+  const { message, onSubmit, onError } = useContactForm(captchaToken);
 
   const contactFormDefaults: ContactFormInput = {
     suppliedname: "",
@@ -51,14 +51,13 @@ export function ContactForm(props: ContactFormProps) {
     [captchaToken, button]
   );
 
-  // const onError = (errors) => console.log(errors);
 
   return (
     <Form>
       <FormContent
         defaultValues={contactFormDefaults}
         inputs={inputs}
-        // onError={onError}
+        onError={onError}
         onSubmit={onSubmit}
       />
       <Recaptcha onChange={handleCaptchaTokenChange} />
@@ -67,7 +66,7 @@ export function ContactForm(props: ContactFormProps) {
         defaultValues={contactFormDefaults}
         inputs={inputs.slice(inputs.length)}
         buttons={modifiedButtonProps}
-        // onError={onError}
+        onError={onError}
         onSubmit={onSubmit}
       />
     </Form>

src/components/ContactForm/index.ts

@@ -1 +1 @@
-export * from './ContactForm';
+export * from './ContactForm';

src/hooks/contact/contact.ts

@@ -3,10 +3,33 @@ import { FieldValues } from "react-hook-form";
 import { useRouter } from "next/router";
 import { postContactData } from "../../lib";
 
+
+interface ErrorDetail {
+  type: string;
+  message: string;
+  ref: {
+    name: string;
+  };
+}
+
+interface Errors<T extends ErrorDetail> {
+  [key: string]: T;
+}
+
 export const useContactForm = (captchaToken: string | null) => {
   const [message, setMessage] = useState<string>("");
   const router = useRouter();
 
+  const onError = <T extends ErrorDetail>(errors: Errors<T>): void => {
+    const errorKeys = Object.keys(errors);
+    errorKeys.forEach((key) => {
+      const error = errors[key];
+      const name = error?.ref?.name || '';
+      const message = error?.message || '';
+      console.log("Error", message, name);
+    })
+  };
+
   const onSubmit = async (data: FieldValues) => {
     if (!captchaToken) {
       setMessage("Please verify you are human");
@@ -30,5 +53,5 @@ export const useContactForm = (captchaToken: string | null) => {
     }
   };
 
-  return { message, onSubmit };
+  return { message, onSubmit , onError };
 };