Moving validation logic for change after async validity in form for form component. Fixes #706

Author: davidkpiano

src/components/form-component.js

@@ -151,13 +151,6 @@ function createFormClass(s = defaultStrategy) {
       if (!formValue) return;
 
       if (!validators && !errors && (modelValue !== nextProps.modelValue)) {
-        // If the form is invalid (due to async validity)
-        // but its fields are valid and the value has changed,
-        // the form should be "valid" again.
-        if (!formValue.$form.valid && isValid(formValue, { async: false })) {
-          dispatch(s.actions.setValidity(model, true));
-        }
-
         return;
       }
 

src/form/is-valid.js

@@ -33,7 +33,7 @@ export default function isValid(formState, options = { async: true }) {
     .every((key) => isValid(formState[key], options));
 }
 
-export function fieldsValid(formState) {
+export function fieldsValid(formState, options = { async: true }) {
   return Object.keys(formState)
-    .every((key) => (key === '$form') || isValid(formState[key]));
+    .every((key) => (key === '$form') || isValid(formState[key], options));
 }

src/reducers/form-actions-reducer.js

@@ -17,6 +17,7 @@ import toPath from '../utils/to-path';
 import initialFieldState from '../constants/initial-field-state';
 import { fieldOrForm, getMeta, updateFieldState } from '../utils/create-field';
 import assocIn from '../utils/assoc-in';
+import getFormValue from '../utils/get-form-value';
 
 const resetFieldState = (field, customInitialFieldState) => {
   if (!isPlainObject(field)) return field;
@@ -187,7 +188,7 @@ export function createFormActionsReducer(options) {
         // If the field is a form, its validity is
         // also based on whether its fields are all valid.
         const areFieldsValid = (field && field.$form)
-          ? fieldsValid(field)
+          ? fieldsValid(field, { async: false })
           : true;
 
         fieldUpdates = {
@@ -343,6 +344,39 @@ export function createFormActionsReducer(options) {
         break;
       }
 
+      case actionTypes.CHANGE: {
+        return updateParentForms(state, localPath, (parentForm) => {
+          const formModelValue = getFormValue(parentForm);
+
+          if (!parentForm.$form) {
+            return {
+              ...customInitialFieldState,
+              value: formModelValue,
+              initialValue: formModelValue,
+            };
+          }
+
+          // If the form is invalid (due to async validity)
+          // but its fields are valid and the value has changed,
+          // the form should be "valid" again.
+          if ((!Object.keys(parentForm.$form.validity).length
+              || !parentForm.$form.validity)
+            && !parentForm.$form.valid
+            && isValid(parentForm, { async: false })) {
+            return {
+              value: formModelValue,
+              validity: true,
+              errors: false,
+              valid: true,
+            };
+          }
+
+          return {
+            value: formModelValue,
+          };
+        });
+      }
+
       default:
         return state;
     }

src/reducers/form/change-action-reducer.js

@@ -7,6 +7,7 @@ import mapValues from '../../utils/map-values';
 import { createInitialState } from '../form-reducer';
 import initialFieldState from '../../constants/initial-field-state';
 import assocIn from '../../utils/assoc-in';
+import getFormValue from '../../utils/get-form-value';
 import invariant from 'invariant';
 
 function updateFieldValue(field, action, parentModel = undefined) {
@@ -122,24 +123,6 @@ function updateFieldValue(field, action, parentModel = undefined) {
   return i.set(updatedField, '$form', dirtyFormState);
 }
 
-function getFormValue(form) {
-  if (form && !form.$form) {
-    return typeof form.loadedValue !== 'undefined'
-      ? form.loadedValue
-      : form.initialValue;
-  }
-
-  const result = mapValues(form, (field, key) => {
-    if (key === '$form') return undefined;
-
-    return getFormValue(field);
-  });
-
-  delete result.$form;
-
-  return result;
-}
-
 export default function changeActionReducer(state, action, localPath) {
   if (action.type !== actionTypes.CHANGE) return state;
 

src/utils/get-form-value.js

@@ -0,0 +1,19 @@
+import mapValues from './map-values';
+
+export default function getFormValue(form) {
+  if (form && !form.$form) {
+    return typeof form.loadedValue !== 'undefined'
+      ? form.loadedValue
+      : form.initialValue;
+  }
+
+  const result = mapValues(form, (field, key) => {
+    if (key === '$form') return undefined;
+
+    return getFormValue(field);
+  });
+
+  delete result.$form;
+
+  return result;
+}