Merge pull request #895 from rvsia/fixErrorsFormat

fix(manager): fix error format inconsistency

Author: Hyperkid123

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

@@ -1105,6 +1105,42 @@ describe('managerApi', () => {
       expect(managerApi().hasValidationErrors).toEqual(true);
     });
 
+    it('should fail sync level validation and set field error', () => {
+      const render = jest.fn();
+      const managerApi = createManagerApi({ validate: () => ({ nested: { foo: 'some-very-evil-error' } }) });
+      const { registerField } = managerApi();
+
+      registerField({ name: 'nested.foo', render });
+
+      expect(managerApi().getState().errors).toEqual({ nested: { foo: 'some-very-evil-error' } });
+      expect(managerApi().getState().valid).toEqual(false);
+      expect(managerApi().getState().invalid).toEqual(true);
+      expect(managerApi().getState().validating).toEqual(false);
+      expect(managerApi().hasValidationErrors).toEqual(true);
+      expect(managerApi().getFieldState('nested.foo').meta.error).toEqual('some-very-evil-error');
+    });
+
+    it('should fail async level validation and set field error', (done) => {
+      const asyncValidateWithError = () => Promise.reject({ nested: { foo: 'some-very-evil-error' } });
+
+      const render = jest.fn();
+      const managerApi = createManagerApi({ validate: asyncValidateWithError });
+      const { registerField } = managerApi();
+
+      registerField({ name: 'nested.foo', render });
+
+      setImmediate(() => {
+        expect(managerApi().getState().valid).toEqual(false);
+        expect(managerApi().getState().invalid).toEqual(true);
+        expect(managerApi().getState().validating).toEqual(false);
+        expect(managerApi().hasValidationErrors).toEqual(true);
+        expect(managerApi().getState().errors).toEqual({ nested: { foo: 'some-very-evil-error' } });
+        expect(managerApi().getFieldState('nested.foo').meta.error).toEqual('some-very-evil-error');
+
+        done();
+      });
+    });
+
     it('should pass async level validation', () => {
       jest.useFakeTimers();
       const render = jest.fn();

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

@@ -254,6 +254,7 @@ const createManagerApi: CreateManagerApi = ({
   let silentRender: string[] = [];
   let runningValidators = 0;
   let flatSubmitErrors: AnyObject = {};
+  let flatErrors: AnyObject = {};
 
   function updateRunningValidators(increment: number): void {
     runningValidators = Math.max(runningValidators + increment, 0);
@@ -460,6 +461,7 @@ const createManagerApi: CreateManagerApi = ({
     if (isPromise(result)) {
       const asyncResult = result as Promise<FormLevelError>;
 
+      flatErrors = {};
       state.errors = {};
       state.hasValidationErrors = false;
       state.valid = true;
@@ -480,14 +482,20 @@ const createManagerApi: CreateManagerApi = ({
           state.valid = false;
           state.invalid = true;
 
+          flatErrors = flatObject(errors);
+          Object.keys(flatErrors).forEach((name) => {
+            handleFieldError(name, false, flatErrors[name]);
+          });
+
           render();
         });
     }
 
     const syncError = result as FormLevelError | undefined;
     if (syncError) {
-      Object.keys(syncError).forEach((name) => {
-        handleFieldError(name, false, syncError[name]);
+      flatErrors = flatObject(syncError);
+      Object.keys(flatErrors).forEach((name) => {
+        handleFieldError(name, false, flatErrors[name]);
       });
       state.errors = syncError;
       state.hasValidationErrors = true;
@@ -499,6 +507,7 @@ const createManagerApi: CreateManagerApi = ({
       state.valid = true;
       state.invalid = false;
       state.error = undefined;
+      flatErrors = {};
       /**
        * Fields have to be revalidated on field level to synchronize the form and field errors
        */
@@ -872,15 +881,17 @@ const createManagerApi: CreateManagerApi = ({
     const render = prepareRerender();
 
     if (error) {
-      state.errors[name] = error;
+      set(state.errors, name, error);
+      flatErrors[name] = error;
       state.valid = false;
       state.invalid = true;
       state.hasValidationErrors = true;
     } else {
-      delete state.errors[name];
+      set(state.errors, name, undefined);
+      delete flatErrors[name];
     }
 
-    if (Object.keys(state.errors).length === 0) {
+    if (Object.keys(flatErrors).length === 0) {
       state.valid = true;
       state.invalid = false;
       state.hasValidationErrors = false;