Merge pull request #199 from data-driven-forms/multi-field-validation

Multi field validation

Author: rvsia

packages/react-form-renderer/demo/index.js

@@ -16,7 +16,6 @@ const submitTest = (...args) => new Promise(resolve => {
 })
 
 const FormButtons = props => {
-    console.log('form buttons props', props)
     return (
         <div>
             <button disabled={props.submitting} type="button" onClick={props.form.submit}>Submit</button>

packages/react-form-renderer/demo/sandbox.js

@@ -7,22 +7,33 @@ const output = {
   fields: [
     {
       name: 'text_box_1',
-      label: 'Text Box',
+      label: 'Text Box 1',
       title: 'Text Box',
       component: components.TEXT_FIELD,
     },
+    {
+      name: 'text_box_1_condition',
+      label: 'Text Box conditional',
+      title: 'Text Box',
+      component: components.TEXT_FIELD,
+      condition: [{
+        when: [ 'text_box_1', 'text_box_4' ],
+        is: 'a',
+      }, {
+        when: 'text_box_3',
+        is: 'x',
+      }],
+    },
     {
       name: 'text_box_2',
-      label: 'Text Box with help',
-      title: 'Text Box with help',
+      label: 'Text Box 2',
       helperText: 'Helper text',
       component: components.TEXT_FIELD,
       hideField: true,
     },
     {
       name: 'text_box_3',
-      label: 'Text Box required',
-      title: 'Text Box required',
+      label: 'Text Box 3',
       isRequired: true,
       component: components.TEXT_FIELD,
       validate: [
@@ -31,16 +42,18 @@ const output = {
     },
     {
       name: 'text_box_4',
-      label: 'Text Box readonly',
-      title: 'Text Box readonly',
+      label: 'Text Box 4',
       isReadOnly: true,
       component: components.TEXT_FIELD,
     },
     {
-      name: 'text_box_5',
-      label: 'Text Box default',
-      title: 'Text Box default',
+      name: 'foo',
+      label: 'Uaaaaaaaaaaaaaaaaa',
       component: components.TEXT_FIELD,
+      condition: {
+        when: 'text_box_1',
+        is: 'a',
+      },
     },
     {
       name: 'text_box_6',

packages/react-form-renderer/src/form-renderer/condition.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isEmpty as lodashIsEmpty } from 'lodash';
-import { Field } from 'react-final-form';
+import { FormSpy } from 'react-final-form';
 
 const isEmptyValue = (value) => typeof value === 'number' || value === true ? false : lodashIsEmpty(value);
 
-const Condition = ({ when, is, isNotEmpty, isEmpty, children, pattern, notMatch }) => {
-  const shouldRender = value => {
+const Condition = ({ condition, children }) => {
+  const fieldCondition = (value, { is, isNotEmpty, isEmpty, pattern, notMatch }) => {
     if (isNotEmpty){
       return !isEmptyValue(value);
     }
@@ -24,14 +24,33 @@ const Condition = ({ when, is, isNotEmpty, isEmpty, children, pattern, notMatch
     return notMatch ? !isMatched : isMatched;
   };
 
+  const shouldRender = (values, conditionItem) => {
+    if (typeof conditionItem.when === 'string') {
+      return fieldCondition(values[conditionItem.when], conditionItem);
+    }
+
+    if (Array.isArray(conditionItem.when)) {
+      return conditionItem.when.map(fieldName => fieldCondition(values[fieldName], conditionItem)).find(condition => !!condition);
+    }
+
+    return false;
+  };
+
   return (
-    <Field name={ when } subscription={{ value: true }}>
-      { ({ input: { value }}) => (shouldRender(value) ? children : null) }
-    </Field>
+    <FormSpy>
+      { ({ values }) => {
+        const visible = Array.isArray(condition)
+          ? !condition.map(conditionItem => !!shouldRender(values, conditionItem)).some(result => result === false)
+          : shouldRender(values, condition);
+
+        return visible ? children : null;
+      } }
+    </FormSpy>
   );
+
 };
 
-Condition.propTypes = {
+const conditionProps = {
   when: PropTypes.string.isRequired,
   is: PropTypes.oneOfType([
     PropTypes.array,
@@ -53,4 +72,15 @@ Condition.propTypes = {
   notMatch: PropTypes.any,
 };
 
+Condition.propTypes = {
+  condition: PropTypes.oneOfType([
+    PropTypes.shape(conditionProps),
+    PropTypes.arrayOf(PropTypes.shape(conditionProps)),
+  ]),
+  children: PropTypes.oneOf([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]).isRequired,
+};
+
 export default Condition;

packages/react-form-renderer/src/form-renderer/render-form.js

@@ -21,7 +21,7 @@ FormFieldHideWrapper.defaultProps = {
 };
 
 const FormConditionWrapper = ({ condition, children }) => (condition ? (
-  <Condition { ...condition }>
+  <Condition condition={ condition }>
     { children }
   </Condition>
 ) : children);

packages/react-form-renderer/src/parsers/default-schema-validator.js

@@ -15,7 +15,14 @@ const checkFieldsArray = (obj, objectKey) => {
 };
 
 const checkCondition = (condition, fieldName) => {
-  if (Array.isArray(condition) || typeof condition !== 'object') {
+  /**
+   * validate array condition
+   */
+  if (Array.isArray(condition)) {
+    return condition.forEach(item => checkCondition(item, fieldName));
+  }
+
+  if (typeof condition !== 'object') {
     throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition must be an object, received ${Array.isArray(condition) ? 'array' : typeof condition}!
@@ -29,7 +36,7 @@ const checkCondition = (condition, fieldName) => {
     `);
   }
 
-  if (typeof condition.when !== 'string') {
+  if (!(typeof condition.when === 'string' || Array.isArray(condition.when))) {
     throw new DefaultSchemaError(`
       Error occured in field definition with name: "${fieldName}".
       Field condition property "when" must be oof type "string", ${typeof condition.when} received!].