support deep state paths in <Form />

Author: Andreas Taube

src/utils/index.js

@@ -4,6 +4,7 @@ import isPlainObject from 'lodash/isPlainObject';
 import every from 'lodash/every';
 import some from 'lodash/some';
 import findKey from 'lodash/findKey';
+import get from 'lodash/get';
 
 import { initialFieldState } from '../reducers/form-reducer';
 
@@ -48,9 +49,10 @@ function getValue(value) {
 }
 
 function getForm(state, model) {
-  const formStateKey = findKey(state, { model });
-
-  return state[formStateKey];
+  const path = model.split('.');
+  const modelRoot = path.length === 1 ? state : get(state, path.slice(0, path.length - 1));
+  const formStateKey = findKey(modelRoot, { model });
+  return modelRoot && modelRoot[formStateKey];
 }
 
 function getValidity(validators, value) {

test/form-component-spec.js

@@ -586,4 +586,34 @@ describe('<Form> component', () => {
       assert.equal(timesSubmitCalled, 1);
     });
   });
+
+  describe('deep state path', () => {
+    const fromsReducer = combineReducers({
+      testForm: formReducer('forms.test'),
+      test: modelReducer('forms.test', {
+        foo: '',
+        bar: '',
+      }),
+    });
+    const store = applyMiddleware(thunk)(createStore)(combineReducers({
+      forms: fromsReducer,
+    }));
+
+    const form = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <Form model="forms.test" onSubmit={() => {}} />
+      </Provider>
+    );
+
+    const component = TestUtils.findRenderedComponentWithType(form, Form);
+    const props = component.renderedElement.props;
+
+    it('should resolve the model value', () => {
+      assert.containSubset(props.modelValue, { foo: '', bar: '' });
+    });
+
+    it('should resolve the form value', () => {
+      assert.containSubset(props.formValue, { valid: true, model: 'forms.test' });
+    });
+  });
 });