feat(manager): mutate error object on field-level validation.

packages/form-state-manager/src/files/form-state-manager.tsx

@@ -5,8 +5,15 @@ import createManagerApi from '../utils/manager-api';
 
 import FormStateManagerProps from '../types/form-state-manager';
 
-const FormStateManager: React.ComponentType<FormStateManagerProps> = ({ children, onSubmit, clearOnUnmount, subscription, clearedValue }) => {
-  const { current: managerApi } = useRef(createManagerApi({ onSubmit, clearOnUnmount, subscription }));
+const FormStateManager: React.ComponentType<FormStateManagerProps> = ({
+  children,
+  onSubmit,
+  clearOnUnmount,
+  subscription,
+  clearedValue,
+  validate
+}) => {
+  const { current: managerApi } = useRef(createManagerApi({ onSubmit, clearOnUnmount, subscription, validate }));
 
   const { change, handleSubmit, registerField, unregisterField, getState, getFieldValue, getFieldState, blur, focus } = managerApi();
 

packages/form-state-manager/src/tests/utils/use-subscription.test.js

@@ -280,6 +280,31 @@ describe('useSubscription', () => {
       wrapper.update();
       expect(wrapper.find(SpyComponent).prop('meta')).toEqual(expect.objectContaining({ error: undefined, valid: true, invalid: false }));
     });
+
+    it('should set form level error key on sync validation', async () => {
+      const managerApi = createManagerApi({});
+      const subscriberProps = {
+        name: 'sync-validate',
+        validate: fooValidator
+      };
+      const wrapper = mount(<DummyComponent managerApi={managerApi} subscriberProps={subscriberProps} />);
+      const input = wrapper.find('input');
+      expect(managerApi().errors).toEqual({});
+
+      await act(async () => {
+        input.simulate('change', { target: { value: 'foo' } });
+      });
+      expect(managerApi().errors).toEqual({
+        'sync-validate': 'error'
+      });
+
+      await act(async () => {
+        input.simulate('change', { target: { value: 'bar' } });
+      });
+      expect(managerApi().errors).toEqual({
+        'sync-validate': undefined
+      });
+    });
   });
 
   describe('clearedValue', () => {

packages/form-state-manager/src/types/form-state-manager.d.ts

@@ -1,12 +1,14 @@
 import AnyObject from './any-object';
 import { Subscription } from './use-subscription';
+import { FormValidator } from './validate';
 
 export interface FormStateManagerProps {
   onSubmit: (values: AnyObject) => void;
   children: (props: AnyObject) => React.ReactNode;
   clearOnUnmount?: boolean;
   subscription?: Subscription;
   clearedValue?: any;
+  validate?: FormValidator;
 }
 
 export default FormStateManagerProps;

packages/form-state-manager/src/types/manager-api.d.ts

@@ -42,6 +42,7 @@ export interface ManagerState {
   getFieldValue: GetFieldValue;
   getFieldState: GetFieldState;
   registerAsyncValidator: (validator: Promise<unknown>) => void;
+  updateError: (name: string, error: string | undefined) => void;
   updateValid: UpdateValid;
   rerender: Rerender;
   registeredFields: Array<string>;

packages/form-state-manager/src/types/validate.d.ts

@@ -1,9 +1,13 @@
 import AnyObject from './any-object';
 import { ManagerApi } from './manager-api';
 
+export interface FormLevelError {
+  [key: string]: string;
+}
+
 export type Validator = (value: any, allValues: AnyObject) => undefined | string | Promise<string | undefined>;
 
-export type FormValidator = (allValues: AnyObject) => undefined | string | Promise<string | undefined>;
+export type FormValidator = (allValues: AnyObject) => FormLevelError | Promise<FormLevelError>;
 
 export type FieldLevelValidator = (
   validator: Validator,
@@ -12,8 +16,4 @@ export type FieldLevelValidator = (
   managerApi: ManagerApi
 ) => string | undefined | Promise<string | undefined>;
 
-export type FormLevelValidator = (
-  validator: FormValidator,
-  allValues: AnyObject,
-  managerApi: ManagerApi
-) => string | undefined | Promise<string | undefined>;
+export type FormLevelValidator = (validator: FormValidator, allValues: AnyObject, managerApi: ManagerApi) => FormLevelError | Promise<FormLevelError>;

packages/form-state-manager/src/utils/manager-api.ts

@@ -4,7 +4,7 @@ import set from 'lodash/set';
 import CreateManagerApi, { ManagerState, ManagerApi, AsyncWatcher, AsyncWatcherRecord, Rerender } from '../types/manager-api';
 import AnyObject from '../types/any-object';
 import FieldConfig from '../types/field-config';
-import { formLevelValidator } from './validate';
+import { formLevelValidator, isPromise } from './validate';
 
 const isLast = (fieldListeners: AnyObject, name: string) => fieldListeners?.[name]?.count === 1;
 
@@ -55,6 +55,7 @@ const createManagerApi: CreateManagerApi = ({ onSubmit, clearOnUnmount, initiali
     getFieldValue,
     getFieldState,
     registerAsyncValidator,
+    updateError,
     updateValid,
     rerender,
     registeredFields: [],
@@ -184,6 +185,10 @@ const createManagerApi: CreateManagerApi = ({ onSubmit, clearOnUnmount, initiali
     state.submitting = submitting;
   }
 
+  function updateError(name: string, error: string | undefined = undefined): void {
+    state.errors[name] = error;
+  }
+
   function registerAsyncValidator(validator: Promise<unknown>) {
     asyncWatcherApi.registerValidator(validator);
   }

packages/form-state-manager/src/utils/use-subscription.ts

@@ -117,6 +117,7 @@ const useSubscription = ({
         validating: false
       }
     }));
+    formOptions().updateError(name, isValid ? undefined : error);
   };
 
   const finalClearedValue = Object.prototype.hasOwnProperty.call(props, 'clearedValue') ? props.clearedValue : rest.clearedValue;

packages/form-state-manager/src/utils/validate.ts

@@ -1,5 +1,5 @@
 import AnyObject from '../types/any-object';
-import { FieldLevelValidator, FormLevelValidator } from '../types/validate';
+import { FieldLevelValidator, FormLevelValidator, FormLevelError } from '../types/validate';
 
 export const isPromise = (obj: AnyObject | PromiseLike<unknown> | string | undefined): boolean =>
   !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
@@ -19,7 +19,7 @@ export const fieldLevelValidator: FieldLevelValidator = (validator, value, allVa
 export const formLevelValidator: FormLevelValidator = (validator, allValues, managerApi) => {
   const result = validator(allValues);
   if (isPromise(result)) {
-    const asyncResult = result as Promise<string | undefined>;
+    const asyncResult = result as Promise<FormLevelError>;
     managerApi().registerAsyncValidator(asyncResult);
     asyncResult.then(() => undefined).catch((error) => error);
     return result;