Merge branch 'master' of github.com:davidkpiano/react-redux-form

Author: davidkpiano

react-redux-form.d.ts

@@ -48,9 +48,15 @@ interface ErrorsComponentMessages {
 interface FormValidators {
     [key: string]: Validators;
 }
+interface FormValidatorsFn {
+    (val: any): FormValidationErrors
+}
 interface ValidationErrors {
     [key: string]: any;
 }
+interface FormValidationErrors {
+    [key: string]: ValidationErrors
+}
 /**
  * Internal interface
  */
@@ -270,7 +276,7 @@ interface BaseFormProps {
      * * Specifying validators on the form is usually sufficient - you don't need to put validators on the <Field> for most use cases.
      * * If you need validators to run on submit, this is the place to put them.
      */
-    validators?: Validators | FormValidators;
+    validators?: Validators | FormValidators | FormValidatorsFn;
 
     /**
      * An object representing the error validators for the fields inside the form, where:

src/components/form-component.js

@@ -20,7 +20,10 @@ import invariant from 'invariant';
 
 const propTypes = {
   component: PropTypes.any,
-  validators: PropTypes.object,
+  validators: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.func,
+  ]),
   errors: PropTypes.object,
   validateOn: PropTypes.oneOf([
     'change',
@@ -157,12 +160,8 @@ function createFormClass(s = defaultStrategy) {
       const validatorsChanged = validators !== this.props.validators
         || errors !== this.props.errors;
 
-      const errorValidators = validators
-        ? merge(invertValidators(validators), errors)
-        : errors;
-
-      let validityChanged = false;
       const fieldsErrors = {};
+      let validityChanged = false;
 
       // this is (internally) mutative for performance reasons.
       const validateField = (errorValidator, field) => {
@@ -197,12 +196,64 @@ function createFormClass(s = defaultStrategy) {
               validityChanged = true;
             }
 
+            // Changed the below for a test that errors and validations
+            // get merged correctly, but it appears this wasn't actually
+            // supported for the same field? Also could have the side
+            // effect that errors wouldn't get cleared?
+            // fieldsErrors[field] = merge(fieldsErrors[field] || {}, fieldErrors);
+
             fieldsErrors[field] = fieldErrors;
           }
         }
       };
 
-      mapValues(errorValidators, validateField);
+      // Run errors first, validations should take precendence.
+      // When run below will replace the contents of the fieldErrors[].
+      mapValues(errors, validateField);
+
+      if (typeof validators === 'function') {
+        const field = '';
+
+        const nextValue = field
+          ? s.get(nextProps.modelValue, field)
+          : nextProps.modelValue;
+
+        const currentValue = field
+          ? s.get(modelValue, field)
+          : modelValue;
+
+        // If the validators didn't change, the validity didn't change.
+        if ((!initial && !validatorsChanged) && (nextValue === currentValue)) {
+          // TODO this will only set the errors on form when using the function.
+          // How handle? Safe to assume will be no dispatch?
+          // fieldsErrors[field] = getField(formValue, field).errors;
+        } else {
+          const multiFieldErrors = getValidity(validators, nextValue);
+
+          if (multiFieldErrors) {
+            Object.keys(multiFieldErrors).forEach((key) => {
+              // key will be the model value to apply errors to.
+              const fieldErrors = multiFieldErrors[key];
+              const currentErrors = getField(formValue, key).errors;
+
+              // Invert validators
+              Object.keys(fieldErrors).forEach((validationName) => {
+                fieldErrors[validationName] = !fieldErrors[validationName];
+              });
+
+              if (!validityChanged && !shallowEqual(fieldErrors, currentErrors)) {
+                validityChanged = true;
+              }
+
+              fieldsErrors[key] = fieldErrors;
+            });
+          }
+        }
+      } else if (validators) {
+        const errorValidators = invertValidators(validators);
+
+        mapValues(errorValidators, validateField);
+      }
 
       // Compute form-level validity
       if (!fieldsErrors.hasOwnProperty('')) {

test/form-component-spec.js

@@ -1766,6 +1766,125 @@ Object.keys(testContexts).forEach((testKey) => {
       });
     });
 
+    describe('form validation as function', () => {
+      const initialState = getInitialState({
+        items: [
+          { name: 'one' },
+          { name: 'two' },
+          { name: 'three' },
+        ],
+      });
+      const store = testCreateStore({
+        testForm: formReducer('test', initialState),
+        test: modelReducer('test', initialState),
+      });
+
+      const form = TestUtils.renderIntoDocument(
+        <Provider store={store}>
+          <Form
+            model="test"
+            validators={(model) => {
+              const field1 = 'items[0].name';
+              const field2 = 'items[1].name';
+              const hasValue = (value) => value && value.length;
+
+              const field1Value = get(model, field1);
+              const field2Value = get(model, field2);
+
+              const notRequired = () => Boolean(hasValue(field1Value) || hasValue(field2Value));
+              const containsOne = field1Value.includes('one');
+              const validations = {};
+
+              validations[field1] = {
+                required: notRequired(),
+                needsFoo: containsOne,
+              };
+              validations[field2] = {
+                required: notRequired(),
+              };
+              return validations;
+            }}
+            errors={{
+              'items[2].name': (value) => { // eslint-disable-line arrow-body-style
+                return value.includes('three') ? false : { invalidThree: 'invalid three' };
+              },
+            }}
+          >
+            {get(initialState, 'items').map((item, i) =>
+              <Control model={`test.items[${i}].name`} />
+            )}
+          </Form>
+        </Provider>
+      );
+
+      const [input1, input2, input3] = 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.isTrue(items[1].name.valid);
+        assert.isTrue($form.valid);
+
+        input1.value = '';
+        TestUtils.Simulate.change(input1);
+
+        const { $form: $form1, items: items1 } = store.getState().testForm;
+
+        assert.isFalse(items1[0].name.valid);
+        assert.isFalse(items1[1].name.valid);
+        assert.isFalse($form1.valid);
+      });
+
+      it('should set validation type on change', () => {
+        input2.value = '';
+        TestUtils.Simulate.change(input2);
+        input1.value = '';
+        TestUtils.Simulate.change(input1);
+        const { $form, items } = store.getState().testForm;
+
+        assert.isFalse(items[0].name.validity.required);
+        assert.isTrue(items[0].name.errors.required);
+        assert.isFalse(items[1].name.validity.required);
+        assert.isTrue(items[1].name.errors.required);
+        assert.isFalse($form.valid);
+      });
+
+      it('should aggregate errors and validations.', () => {
+        input1.value = '';
+        TestUtils.Simulate.change(input1);
+        input2.value = '';
+        TestUtils.Simulate.change(input2);
+        input3.value = 'foo';
+        TestUtils.Simulate.change(input3);
+        const { $form, items } = store.getState().testForm;
+
+        assert.isFalse(items[0].name.validity.required);
+        assert.isFalse(items[0].name.validity.needsFoo);
+
+        assert.isTrue(items[0].name.errors.required);
+        assert.isTrue(items[0].name.errors.needsFoo);
+
+        assert.isFalse(items[1].name.validity.required);
+        assert.isTrue(items[1].name.errors.required);
+
+        assert.isFalse(items[2].name.validity.invalidThree);
+        assert.equal(items[2].name.errors.invalidThree, 'invalid three');
+
+        assert.isFalse($form.valid);
+      });
+    });
+
     describe('submit valid form no validators', () => {
       const initialState = getInitialState({ foo: '' });