Adding deep model validation for <Form> validators prop. Fixes #510

Author: davidkpiano

docs/guides/validation.md

@@ -235,6 +235,47 @@ import { Form } from 'react-redux-form';
 </Form>
 ```
 
+## Deep Model Validation in `<Form>`
+
+As of RRF version 1.2.4, you can have deep validators in the `<Form validators={{...}}>` prop. Here's what it looks like:
+
+```jsx
+// Suppose you have a store with this 'user' model:
+// {
+//   name: 'Bob',
+//   phones: [
+//     { type: 'home', number: '5551231234' },
+//     { type: 'cell', number: '5550980987' },
+//   ],
+// }
+
+// You can validate each individual phone number like so:
+<Form
+  model="user"
+  validators={{
+    'phones[].number': (value) => value && value.length === 10,
+  }}
+>
+  {/* etc. */}
+</Form>
+````
+
+The empty brackets in the validator key `'phones[].number'` tell RRF to validate the `.number` property for each `phone` in the `user.phones[]` array.
+
+Alternatively, you can just set this validator directly on each control; e.g.:
+
+```jsx
+{user.phones.map((phone, i) =>
+  <Control
+    model={`phones[${i}].number`}
+    validators={{
+      validNumber: (value) => value && value.length === 10,
+    }}
+  />
+)}
+```
+
+
 ## Custom Error Messages
 
 Similar to how the `validators` prop and `setValidity()` action works, you can use the `errors` prop and `setErrors()` action to indicate errors. Keep in mind, these should express the _inverse_ validity state of the model. This means that anything _truthy_ indicates an error.

src/components/form-component.js

@@ -153,30 +153,47 @@ function createFormClass(s = defaultStrategy) {
         : errors;
 
       let validityChanged = false;
+      const fieldsErrors = {};
+
+      // this is (internally) mutative for performance reasons.
+      const validateField = (errorValidator, field) => {
+        if (!!~field.indexOf('[]')) {
+          const [parentModel, childModel] = field.split('[]');
+
+          const nextValue = parentModel
+            ? s.get(nextProps.modelValue, parentModel)
+            : nextProps.modelValue;
+
+          nextValue.forEach((subValue, index) => {
+            validateField(errorValidator, `${parentModel}[${index}]${childModel}`);
+          });
+        } else {
+          const nextValue = field
+            ? s.get(nextProps.modelValue, field)
+            : nextProps.modelValue;
+
+          const currentValue = field
+            ? s.get(modelValue, field)
+            : modelValue;
+
+          const currentErrors = getField(formValue, field).errors;
+
+          // If the validators didn't change, the validity didn't change.
+          if ((!initial && !validatorsChanged) && (nextValue === currentValue)) {
+            fieldsErrors[field] = getField(formValue, field).errors;
+          } else {
+            const fieldErrors = getValidity(errorValidator, nextValue);
+
+            if (!validityChanged && !shallowEqual(fieldErrors, currentErrors)) {
+              validityChanged = true;
+            }
 
-      const fieldsErrors = mapValues(errorValidators, (errorValidator, field) => {
-        const nextValue = field
-          ? s.get(nextProps.modelValue, field)
-          : nextProps.modelValue;
-
-        const currentValue = field
-          ? s.get(modelValue, field)
-          : modelValue;
-
-        const currentErrors = getField(formValue, field).errors;
-
-        if ((!initial && !validatorsChanged) && (nextValue === currentValue)) {
-          return getField(formValue, field).errors;
-        }
-
-        const fieldErrors = getValidity(errorValidator, nextValue);
-
-        if (!shallowEqual(fieldErrors, currentErrors)) {
-          validityChanged = true;
+            fieldsErrors[field] = fieldErrors;
+          }
         }
+      };
 
-        return fieldErrors;
-      });
+      mapValues(errorValidators, validateField);
 
       // Compute form-level validity
       if (!fieldsErrors.hasOwnProperty('')) {

test/form-component-spec.js

@@ -1616,6 +1616,53 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('validation of nested/deep model values', () => {
+      const initialState = getInitialState({
+        items: [
+          { name: 'one' },
+          { name: 'two' },
+        ],
+      });
+      const store = testCreateStore({
+        testForm: formReducer('test', initialState),
+        test: modelReducer('test', initialState),
+      });
+      const form = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form
+            model="test"
+            validators={{
+              'items[].name': (name) => name && name.length,
+            }}
+          >
+          {get(initialState, 'items').map((item, i) =>
+            <Control model={`test.items[${i}].name`} />
+          )}
+          </Form>
+        </Provider>
+      );
+
+      const [_, input2] = TestUtils
+        .scryRenderedDOMComponentsWithTag(form, 'input');
+
+      it('should initially validate each item', () => {
+        const { $form, items } = store.getState().testForm;
+        assert.isTrue(items[0].name.valid);
+        assert.isTrue(items[1].name.valid);
+        assert.isTrue($form.valid);
+      });
+
+      it('should check validity of each item on change', () => {
+        input2.value = '';
+        TestUtils.Simulate.change(input2);
+        const { $form, items } = store.getState().testForm;
+
+        assert.isTrue(items[0].name.valid);
+        assert.isFalse(items[1].name.valid);
+        assert.isFalse($form.valid);
+      });
+    });
+
     describe('submit after field invalid', () => {
       const initialState = getInitialState({ username: '' });
       const store = testCreateStore({