Adding meta asyncKeys prop to field to keep track of async validators and allow form to submit when only sync validity is valid. Fixes #567

Author: davidkpiano

src/actions/field-actions.js

@@ -123,13 +123,16 @@ function createFieldActions(s = defaultStrategies) {
     model,
   });
 
-  const asyncSetValidity = (model, validator) => (dispatch, getState) => {
+  const asyncSetValidity = (model, validator, options = {}) => (dispatch, getState) => {
     const value = s.get(getState(), model);
 
     dispatch(setValidating(model, true));
 
     const done = (validity) => {
-      dispatch(setValidity(model, validity));
+      dispatch(setValidity(model, validity, {
+        async: true,
+        ...options,
+      }));
     };
 
     const immediateResult = validator(value, done);
@@ -139,6 +142,12 @@ function createFieldActions(s = defaultStrategies) {
     }
   };
 
+  const asyncSetErrors = (model, validator, options = {}) =>
+    asyncSetValidity(model, validator, {
+      errors: true,
+      ...options,
+    });
+
   const setSubmitted = (model, submitted = true) => ({
     type: actionTypes.SET_SUBMITTED,
     model,
@@ -297,6 +306,7 @@ function createFieldActions(s = defaultStrategies) {
     validateFields,
     validateFieldsErrors,
     asyncSetValidity,
+    asyncSetErrors,
     addIntent,
     clearIntents,
   }, trackable);

src/components/form-component.js

@@ -10,10 +10,10 @@ import actions from '../actions';
 import getValidity from '../utils/get-validity';
 import invertValidators from '../utils/invert-validators';
 import isValidityInvalid from '../utils/is-validity-invalid';
+import isValid from '../form/is-valid';
 import getForm from '../utils/get-form';
 import getModel from '../utils/get-model';
 import getField from '../utils/get-field';
-import { fieldsValid } from '../form/is-valid';
 import deepCompareChildren from '../utils/deep-compare-children';
 import containsEvent from '../utils/contains-event';
 import invariant from 'invariant';
@@ -150,7 +150,7 @@ function createFormClass(s = defaultStrategy) {
         // 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 && fieldsValid(formValue)) {
+        if (isValid(formValue, { async: false })) {
           dispatch(s.actions.setValidity(model, true));
         }
 
@@ -310,7 +310,7 @@ function createFormClass(s = defaultStrategy) {
           case 'submit': {
             dispatch(s.actions.clearIntents(model, intent));
 
-            if (formValue.$form.valid) {
+            if (isValid(formValue, { async: false })) {
               this.handleValidSubmit();
             } else {
               this.handleInvalidSubmit();

src/form/is-valid.js

@@ -1,6 +1,6 @@
 import isPlainObject from '../utils/is-plain-object';
 
-export default function isValid(formState) {
+export default function isValid(formState, options = { async: true }) {
   if (!formState) return true;
 
   if (!formState.$form) {
@@ -11,14 +11,23 @@ export default function isValid(formState) {
     }
 
     return Object.keys(formState.errors).every((errorKey) => {
+      // if specified to ignore async validator keys and
+      // current error key is an async validator key,
+      // treat key as valid
+      if (!options.async
+        && formState.asyncKeys
+        && !!~formState.asyncKeys.indexOf(errorKey)) {
+        return true;
+      }
+
       const valid = !formState.errors[errorKey];
 
       return valid;
     });
   }
 
   return Object.keys(formState)
-    .every((key) => isValid(formState[key]));
+    .every((key) => isValid(formState[key], options));
 }
 
 export function fieldsValid(formState) {

src/reducers/form-actions-reducer.js

@@ -189,6 +189,10 @@ export default function formActionsReducer(state, action, localPath) {
           : isValidityValid(validity)),
       };
 
+      if (action.async) {
+        fieldUpdates.asyncKeys = Object.keys(isErrors ? action.errors : action.validity);
+      }
+
       parentFormUpdates = (form) => ({ valid: isValid(form) });
 
       break;

test/form-component-spec.js

@@ -2059,5 +2059,52 @@ Object.keys(testContexts).forEach((testKey) => {
         );
       });
     });
+
+    describe('deep async validity', () => {
+      const initialState = getInitialState({ foo: '' });
+
+      const store = testCreateStore({
+        test: modelReducer('test', initialState),
+        testForm: formReducer('test', initialState),
+      });
+
+      const handleSubmit = sinon.spy((val) => val);
+
+      TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form
+            model="test"
+            onSubmit={handleSubmit}
+          >
+            <Control model=".foo" />
+          </Form>
+        </Provider>
+      );
+
+      beforeEach(() => {
+        store.dispatch(actions.reset('test'));
+      });
+
+      it('should allow submit if non-async validity is valid', () => {
+        store.dispatch(actions.setValidity('test.foo', { asyncValid: false }, { async: true }));
+        store.dispatch(actions.setValidity('test.foo', { syncValid: false }, { merge: true }));
+
+        assert.isFalse(store.getState().testForm.foo.valid);
+
+        store.dispatch(actions.submit('test'));
+
+        assert.isFalse(handleSubmit.calledOnce,
+          'not called because sync validity is invalid');
+
+        store.dispatch(actions.setValidity('test.foo', { syncValid: true }, { merge: true }));
+
+        assert.isFalse(store.getState().testForm.foo.valid);
+
+        store.dispatch(actions.submit('test'));
+
+        assert.isTrue(handleSubmit.calledOnce,
+          'called because sync validity is valid');
+      });
+    });
   });
 });