Reversing premature setSubmitted flagging actions and correctly computing form-level validity after async validation. Fixes #246

Author: davidkpiano

src/actions/field-actions.js

@@ -130,7 +130,7 @@ const submit = (model, promise, options = {}) => dispatch => {
   }).catch(error => {
     dispatch(batchActions.batch(model, [
       setSubmitFailed(model),
-      errorsAction(model, error, { errors: true }),
+      errorsAction(model, error),
     ]));
   });
 

src/components/form-component.js

@@ -50,9 +50,7 @@ class Form extends Component {
       modelValue,
     } = this.props;
 
-    if (!formValue) {
-      return;
-    }
+    if (!formValue) return;
 
     if (!validators && !errors && (modelValue !== nextProps.modelValue)) {
       if (!formValue.valid) {
@@ -104,11 +102,18 @@ class Form extends Component {
       return fieldErrors;
     });
 
+    const fieldsErrors = merge(
+      invertValidity(fieldsValidity),
+      fieldsErrorsValidity
+    );
+
+    // Compute form-level validity
+    if (!fieldsValidity.hasOwnProperty('') && !fieldsErrorsValidity.hasOwnProperty('')) {
+      fieldsErrors[''] = false;
+    }
+
     if (validityChanged) {
-      dispatch(actions.setFieldsErrors(model, merge(
-        invertValidity(fieldsValidity),
-        fieldsErrorsValidity
-      )));
+      dispatch(actions.setFieldsErrors(model, fieldsErrors));
     }
   }
 
@@ -120,7 +125,7 @@ class Form extends Component {
       onSubmit = identity,
     } = this.props;
 
-    dispatch(actions.setSubmitted(model));
+    dispatch(actions.setPending(model));
 
     return onSubmit(modelValue);
   }

test/form-component-spec.js

@@ -696,8 +696,6 @@ describe('<Form> component', () => {
 
       TestUtils.Simulate.submit(formElement);
 
-      assert.isTrue(store.getState().testForm.submitted);
-
       assert.deepEqual(
         submitValue,
         {
@@ -1011,6 +1009,53 @@ describe('<Form> component', () => {
     });
   });
 
+  describe('invalidating async validity on form change with form validators', () => {
+    const store = createTestStore(applyMiddleware(thunk)(createStore)(combineReducers({
+      test: modelReducer('test', { foo: 'invalid' }),
+      testForm: formReducer('test', { foo: 'invalid' }),
+    })));
+
+    function handleSubmit() {
+      store.dispatch(actions.batch('test', [
+        actions.setSubmitFailed('test'),
+        actions.setErrors('test', 'Form is invalid', { errors: true }),
+      ]));
+    }
+
+    const form = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Form model="test"
+          validators={{
+            foo: (val) => val && val.length,
+          }}
+          onSubmit={handleSubmit}
+        >
+          <Field model="test.foo">
+            <input type="text" />
+          </Field>
+        </Form>
+      </Provider>
+    );
+
+    const formElement = TestUtils.findRenderedDOMComponentWithTag(form, 'form');
+    const inputElement = TestUtils.findRenderedDOMComponentWithTag(form, 'input');
+
+    it('should set errors from rejected submit handler on valid submit', () => {
+      TestUtils.Simulate.submit(formElement);
+
+      assert.containSubset(
+        store.getState().testForm,
+        { errors: 'Form is invalid' });
+    });
+
+    it('should set validity on form changes after submit failed', () => {
+      inputElement.value = 'valid';
+      TestUtils.Simulate.change(inputElement);
+
+      assert.isTrue(store.getState().testForm.valid);
+    });
+  });
+
   describe('submit after invalid', () => {
     const handleSubmit = sinon.spy((val) => val);
 
@@ -1078,16 +1123,18 @@ describe('<Form> component', () => {
 
       TestUtils.Simulate.change(pass2);
 
+
       TestUtils.Simulate.submit(formElement);
 
+      assert.isTrue(store.getState().testForm.valid);
+
       assert.isTrue(handleSubmit.calledOnce);
 
       assert.containSubset(
         store.getState().testForm,
         {
           valid: true,
           submitFailed: false,
-          submitted: true,
         });
     });
   });