Merge pull request #24 from MakerXStudio/fix/validation-messages-not-…

…showing

Fix: a bug where validation messages would only show after an externally triggered re-render

.changeset/dull-spies-refuse.md

@@ -0,0 +1,6 @@
+---
+'@makerx/forms-core': patch
+'@makerx/forms-mui': patch
+---
+
+Fix bug where validation errors would only show after an externally triggered re-render

packages/core/src/hooks/useFormFieldError.ts

@@ -0,0 +1,9 @@
+import { useFormContext } from 'react-hook-form'
+import type { FieldError } from 'react-hook-form/dist/types/errors'
+
+export const useFormFieldError = (field: string): FieldError | undefined => {
+  const {
+    formState: { errors },
+  } = useFormContext()
+  return field.split('.').reduce((acc: any, cur) => acc?.[cur], errors)
+}

packages/core/src/index.ts

@@ -2,4 +2,5 @@ export { z } from 'zod';
 export { zfd } from 'zod-form-data';
 export * from './components/ValidatedFormFactory';
 export * from './hooks/useFieldMetadata';
+export * from './hooks/useFormFieldError';
 export * from './util/FormFieldHelperBase';

packages/mui/src/components/form-item/FormItem.tsx

@@ -1,4 +1,4 @@
-import { useFieldMetaData } from '@makerx/forms-core';
+import { useFieldMetaData, useFormFieldError } from '@makerx/forms-core';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import { InputLabel, Tooltip, Typography } from '@mui/material';
 import clsx from 'clsx';
@@ -30,9 +30,11 @@ export function FormItem<
   field,
   longHint,
 }: FormItemProps<TSchema>) {
-  const { getFieldState } = useFormContext();
+  const {
+    formState: { errors },
+  } = useFormContext();
   const { required } = useFieldMetaData(field);
-  const { error } = getFieldState(field);
+  const error = useFormFieldError(field);
   const errorMessage = error?.message;
   return (
     <div>

packages/mui/tsconfig.json

@@ -18,5 +18,6 @@
     "isolatedModules": true,
     "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"],
+
 }