added callback for listening to field onerror events

Author: jloleysens

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx

@@ -20,6 +20,7 @@ export interface Props<T, FormType = FormData, I = T> {
   componentProps?: Record<string, any>;
   readDefaultValueOnForm?: boolean;
   onChange?: (value: I) => void;
+  onError?: (errors: string[] | null) => void;
   children?: (field: FieldHook<T, I>) => JSX.Element | null;
   [key: string]: any;
 }
@@ -33,6 +34,7 @@ function UseFieldComp<T = unknown, FormType = FormData, I = T>(props: Props<T, F
     componentProps,
     readDefaultValueOnForm = true,
     onChange,
+    onError,
     children,
     ...rest
   } = props;
@@ -62,7 +64,7 @@ function UseFieldComp<T = unknown, FormType = FormData, I = T>(props: Props<T, F
     }
   }
 
-  const field = useField<T, FormType, I>(form, path, fieldConfig, onChange);
+  const field = useField<T, FormType, I>(form, path, fieldConfig, onChange, onError);
 
   // Children prevails over anything else provided.
   if (children) {

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -27,7 +27,8 @@ export const useField = <T, FormType = FormData, I = T>(
   form: FormHook<FormType>,
   path: string,
   config: FieldConfig<T, FormType, I> & InternalFieldConfig<T> = {},
-  valueChangeListener?: (value: I) => void
+  valueChangeListener?: (value: I) => void,
+  errorChangeListener?: (errors: string[] | null) => void
 ) => {
   const {
     type = FIELD_TYPES.TEXT,
@@ -596,6 +597,15 @@ export const useField = <T, FormType = FormData, I = T>(
     };
   }, [onValueChange]);
 
+  useEffect(() => {
+    if (!isMounted.current) {
+      return;
+    }
+    if (errorChangeListener) {
+      errorChangeListener(errors.length ? errors.map((error) => error.message) : null);
+    }
+  }, [errors, errorChangeListener]);
+
   useEffect(() => {
     isMounted.current = true;