Merge pull request #1184 from brycesenz/924_form_cache_clearing

924 form cache clearing

Author: davidkpiano

src/components/form-component.js

@@ -10,7 +10,7 @@ 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 getForm, { clearGetFormCacheForModel } from '../utils/get-form';
 import getModel from '../utils/get-model';
 import getField from '../utils/get-field';
 import deepCompareChildren from '../utils/deep-compare-children';
@@ -409,6 +409,7 @@ function createFormClass(s = defaultStrategy) {
 
   function mapStateToProps(state, { model }) {
     const modelString = getModel(model, state);
+    clearGetFormCacheForModel(modelString);
     const form = s.getForm(state, modelString);
 
     invariant(form,

src/utils/get-form.js

@@ -76,6 +76,10 @@ let formStateKeyCache = {};
 export const clearGetFormCache =
   () => formStateKeyCache = {}; // eslint-disable-line no-return-assign
 
+export const clearGetFormCacheForModel =
+  // eslint-disable-next-line
+  (modelString) => delete formStateKeyCache[modelString];
+
 const getFormStateKeyCached = (() => (state, modelString, s = defaultStrategy) => {
   if (formStateKeyCache[modelString]) return formStateKeyCache[modelString];
 

test/form-component-spec.js

@@ -2042,6 +2042,106 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+
+    describe('form validation with models in collections', () => {
+      it('validates if item in initialState', () => {
+        const initialState = getInitialState({ test1: {} });
+
+        const store = testCreateStore({
+          test: modelReducer('tests', initialState),
+          testForm: formReducer('tests', initialState),
+        });
+
+        let handleSubmitFailedCalledWith = null;
+
+        function handleSubmitFailed(val) {
+          handleSubmitFailedCalledWith = val;
+        }
+
+        const form = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <Form
+              model="tests.test1"
+              onSubmitFailed={handleSubmitFailed}
+              validators={{
+                foo: (val) => val,
+              }}
+            >
+              <Control model=".foo" />
+            </Form>
+          </Provider>
+        );
+
+        const formNode = TestUtils.findRenderedDOMComponentWithTag(form, 'form');
+
+        TestUtils.Simulate.submit(formNode);
+
+        assert.containSubset(handleSubmitFailedCalledWith, {
+          $form: {
+            model: 'tests.test1',
+            valid: false,
+          },
+          foo: {
+            model: 'tests.test1.foo',
+            valid: false,
+            errors: true,
+          },
+        });
+
+        assert.isFalse(store.getState().testForm.test1.$form.pending);
+        assert.isTrue(store.getState().testForm.test1.$form.submitFailed);
+      });
+
+      it('validates if item not in initialState', () => {
+        const initialState = getInitialState({ test1: {} });
+
+        const store = testCreateStore({
+          test: modelReducer('tests', initialState),
+          testForm: formReducer('tests', initialState),
+        });
+
+        let handleSubmitFailedCalledWith = null;
+
+        function handleSubmitFailed(val) {
+          handleSubmitFailedCalledWith = val;
+        }
+
+        const form = TestUtils.renderIntoDocument(
+          <Provider store={store}>
+            <Form
+              model="tests.test2"
+              onSubmitFailed={handleSubmitFailed}
+              validators={{
+                foo: (val) => val,
+              }}
+            >
+              <Control model=".foo" />
+            </Form>
+          </Provider>
+        );
+
+        const formNode = TestUtils.findRenderedDOMComponentWithTag(form, 'form');
+
+        TestUtils.Simulate.submit(formNode);
+
+        assert.containSubset(handleSubmitFailedCalledWith, {
+          $form: {
+            model: 'tests.test2',
+            valid: false,
+          },
+          foo: {
+            model: 'tests.test2.foo',
+            valid: false,
+            errors: true,
+          },
+        });
+
+        assert.isFalse(store.getState().testForm.test2.$form.pending);
+        assert.isTrue(store.getState().testForm.test2.$form.submitFailed);
+      });
+    });
+
+
     describe('getDispatch() prop', () => {
       it('should provide dispatch to callback', (done) => {
         const initialState = getInitialState({ foo: '' });