@kineticdata/react 6.0.4 → 6.1.0

package/lib/components/form/Form.js

@@ -6,7 +6,7 @@ var _regeneratorRuntime3 = require("@babel/runtime/helpers/regeneratorRuntime")[
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.validateField = exports.unmountForm = exports.toggleMultiValue = exports.submitForm = exports.setValue = exports.serializeForm = exports.resetForm = exports.reloadDataSource = exports.onSubmit = exports.onReset = exports.onFocus = exports.onChange = exports.onBlur = exports.mountForm = exports.mapStateToProps = exports.isEmpty = exports.getTimestamp = exports.generateForm = exports.evaluateFieldProps = exports.configureForm = exports.clearError = exports.checkRequired = exports.checkPattern = exports.checkConstraint = exports.Form = void 0;
+exports.validateForm = exports.validateField = exports.unmountForm = exports.toggleMultiValue = exports.submitForm = exports.setValue = exports.serializeForm = exports.resetForm = exports.reloadDataSources = exports.reloadDataSource = exports.onSubmit = exports.onReset = exports.onFocus = exports.onChange = exports.onBlur = exports.mountForm = exports.mapStateToProps = exports.isEmpty = exports.getTimestamp = exports.generateForm = exports.evaluateFieldProps = exports.configureForm = exports.clearError = exports.checkRequired = exports.checkPattern = exports.checkConstraint = exports.Form = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
@@ -100,7 +100,7 @@ var initializeFields = function initializeFields(formState) {
 };
 var buildBindings = function buildBindings(formState) {
   return formState.set('bindings', formState.dataSources.filter(function (dataSource) {
-    return dataSource.status === _Form.DATA_SOURCE_STATUS.RESOLVED;
+    return [_Form.DATA_SOURCE_STATUS.RESOLVED, _Form.DATA_SOURCE_STATUS.PENDING_RELOAD].includes(dataSource.status);
   }).map(function (dataSource) {
     return dataSource.data;
   }).merge(formState.fields ? {
@@ -146,7 +146,7 @@ var digest = function digest(formState) {
       value = _ref4$payload.value;
     return state.updateIn(['forms', formKey, 'fields', name], function (field) {
       return field.merge({
-        value: value || _Form.FIELD_DEFAULT_VALUES.get(field.type, ''),
+        value: field.type === 'number' ? typeof value === 'number' ? value : '' : value || _Form.FIELD_DEFAULT_VALUES.get(field.type, ''),
         touched: true,
         dirty: !(0, _immutable.is)(value, field.initialValue)
       });
@@ -186,18 +186,20 @@ var digest = function digest(formState) {
     var _ref8$payload = _ref8.payload,
       formKey = _ref8$payload.formKey,
       name = _ref8$payload.name;
-    return state.mergeIn(['forms', formKey, 'dataSources', name], {
-      status: _Form.DATA_SOURCE_STATUS.PENDING
+    return state.updateIn(['forms', formKey, 'dataSources', name, 'status'], function (status) {
+      return status === _Form.DATA_SOURCE_STATUS.RESOLVED ? _Form.DATA_SOURCE_STATUS.PENDING_RELOAD : _Form.DATA_SOURCE_STATUS.PENDING;
     });
   },
   RESOLVE_DATA_SOURCE: function RESOLVE_DATA_SOURCE(state, _ref9) {
     var _ref9$payload = _ref9.payload,
       formKey = _ref9$payload.formKey,
       name = _ref9$payload.name,
-      data = _ref9$payload.data;
+      data = _ref9$payload.data,
+      error = _ref9$payload.error;
     return state.updateIn(['forms', formKey, 'dataSources', name], function (dataSource) {
       return dataSource && dataSource.merge({
         data: (0, _immutable.fromJS)(data),
+        error: error,
         status: _Form.DATA_SOURCE_STATUS.RESOLVED
       });
     }).updateIn(['forms', formKey], digest);
@@ -239,6 +241,16 @@ var digest = function digest(formState) {
         return fieldNames.includes(field.name) ? field.set('touched', true) : field;
       });
     });
+  },
+  VALIDATION_FIELD_ERRORS: function VALIDATION_FIELD_ERRORS(state, _ref16) {
+    var _ref16$payload = _ref16.payload,
+      formKey = _ref16$payload.formKey,
+      fieldNames = _ref16$payload.fieldNames;
+    return state.updateIn(['forms', formKey, 'fields'], function (fields) {
+      return fields.map(function (field) {
+        return fieldNames.includes(field.name) ? field.set('touched', true) : field;
+      });
+    });
   }
 });
 var selectForm = function selectForm(formKey) {
@@ -258,8 +270,8 @@ var selectDataSource = function selectDataSource(formKey, name) {
       case 0:
         checkActions = ['CONFIGURE_FORM', 'RESOLVE_DATA_SOURCE'];
         _context2.next = 3;
-        return (0, _effects.takeEvery)(checkActions, function (_ref16) {
-          var formKey = _ref16.payload.formKey;
+        return (0, _effects.takeEvery)(checkActions, function (_ref17) {
+          var formKey = _ref17.payload.formKey;
           return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
             var formState;
             return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
@@ -317,6 +329,32 @@ var selectDataSource = function selectDataSource(formKey, name) {
     }
   }, _callee3);
 })));
+(0, _store.regSaga)((0, _effects.takeEvery)('RELOAD_DATA_SOURCES', /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee4(action) {
+  var _action$payload, formKey, dataSourceNames, formState;
+  return (0, _regeneratorRuntime2["default"])().wrap(function _callee4$(_context4) {
+    while (1) switch (_context4.prev = _context4.next) {
+      case 0:
+        _action$payload = action.payload, formKey = _action$payload.formKey, dataSourceNames = _action$payload.dataSourceNames;
+        _context4.next = 3;
+        return (0, _effects.select)(selectForm(formKey));
+      case 3:
+        formState = _context4.sent;
+        if (!(formState !== null && formState !== void 0 && formState.dataSources)) {
+          _context4.next = 7;
+          break;
+        }
+        _context4.next = 7;
+        return (0, _effects.all)(formState.dataSources.filter(function (ds, name) {
+          return !(dataSourceNames !== null && dataSourceNames !== void 0 && dataSourceNames.length) || dataSourceNames.includes(name);
+        }).map(function (ds, name) {
+          return (0, _effects.fork)(runDataSource, formKey, name, ds);
+        }).valueSeq().toArray());
+      case 7:
+      case "end":
+        return _context4.stop();
+    }
+  }, _callee4);
+})));
 
 // Create a process that represents a datasource, it listens for form events
 // and checks to see if its parameters have changed, if it detects parameter
@@ -324,16 +362,16 @@ var selectDataSource = function selectDataSource(formKey, name) {
 // listens for a UNMOUNT_FORM action to end the while-loop.
 function runDataSource(formKey, name, dataSource) {
   var params, paramsFn, prevParams, _yield$race, _yield$race2, checkAction, unmountAction, formState, _params, nextParams;
-  return (0, _regeneratorRuntime2["default"])().wrap(function runDataSource$(_context4) {
-    while (1) switch (_context4.prev = _context4.next) {
+  return (0, _regeneratorRuntime2["default"])().wrap(function runDataSource$(_context5) {
+    while (1) switch (_context5.prev = _context5.next) {
       case 0:
         params = dataSource.params, paramsFn = dataSource.paramsFn;
         prevParams = (0, _immutable.fromJS)(params);
         if (!params) {
-          _context4.next = 5;
+          _context5.next = 5;
           break;
         }
-        _context4.next = 5;
+        _context5.next = 5;
         return (0, _effects.put)((0, _store.action)('CALL_DATA_SOURCE', {
           formKey: formKey,
           name: name,
@@ -341,43 +379,43 @@ function runDataSource(formKey, name, dataSource) {
         }));
       case 5:
         if (!paramsFn) {
-          _context4.next = 29;
+          _context5.next = 29;
           break;
         }
       case 6:
         if (!true) {
-          _context4.next = 29;
+          _context5.next = 29;
           break;
         }
-        _context4.next = 9;
-        return (0, _effects.race)([(0, _effects.take)(['CONFIGURE_FORM', 'REJECT_DATA_SOURCE', 'RESET', 'RESOLVE_DATA_SOURCE', 'SET_VALUE', 'TOGGLE_MULTI_VALUE', 'SUBMIT_SUCCESS']), (0, _effects.take)('UNMOUNT_FORM')]);
+        _context5.next = 9;
+        return (0, _effects.race)([(0, _effects.take)(['CONFIGURE_FORM', 'RELOAD_DATA_SOURCES', 'REJECT_DATA_SOURCE', 'RESET', 'RESOLVE_DATA_SOURCE', 'SET_VALUE', 'TOGGLE_MULTI_VALUE', 'SUBMIT_SUCCESS']), (0, _effects.take)('UNMOUNT_FORM')]);
       case 9:
-        _yield$race = _context4.sent;
+        _yield$race = _context5.sent;
         _yield$race2 = (0, _slicedToArray2["default"])(_yield$race, 2);
         checkAction = _yield$race2[0];
         unmountAction = _yield$race2[1];
         if (!(unmountAction && unmountAction.payload.formKey === formKey)) {
-          _context4.next = 17;
+          _context5.next = 17;
           break;
         }
-        return _context4.abrupt("break", 29);
+        return _context5.abrupt("break", 29);
       case 17:
         if (!(checkAction && checkAction.payload.formKey === formKey)) {
-          _context4.next = 27;
+          _context5.next = 27;
           break;
         }
-        _context4.next = 20;
+        _context5.next = 20;
         return (0, _effects.select)(selectForm(formKey));
       case 20:
-        formState = _context4.sent;
+        formState = _context5.sent;
         _params = formState.getIn(['dataSources', name, 'params']);
         nextParams = (0, _immutable.fromJS)(_params);
         if ((0, _immutable.is)(nextParams, prevParams)) {
-          _context4.next = 27;
+          _context5.next = 27;
           break;
         }
         prevParams = nextParams;
-        _context4.next = 27;
+        _context5.next = 27;
         return (0, _effects.put)(_params ? (0, _store.action)('CALL_DATA_SOURCE', {
           formKey: formKey,
           name: name,
@@ -389,143 +427,146 @@ function runDataSource(formKey, name, dataSource) {
           timestamp: null
         }));
       case 27:
-        _context4.next = 6;
+        _context5.next = 6;
         break;
       case 29:
       case "end":
-        return _context4.stop();
+        return _context5.stop();
     }
   }, _marked);
 }
-(0, _store.regSaga)((0, _effects.takeEvery)('CALL_DATA_SOURCE', function (_ref17) {
-  var _ref17$payload = _ref17.payload,
-    formKey = _ref17$payload.formKey,
-    name = _ref17$payload.name,
-    params = _ref17$payload.params;
-  return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee4() {
-    var _yield$select2, fn, transform, data, timestamp;
-    return (0, _regeneratorRuntime2["default"])().wrap(function _callee4$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+(0, _store.regSaga)((0, _effects.takeEvery)('CALL_DATA_SOURCE', function (_ref18) {
+  var _ref18$payload = _ref18.payload,
+    formKey = _ref18$payload.formKey,
+    name = _ref18$payload.name,
+    params = _ref18$payload.params;
+  return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee5() {
+    var _yield$select2, fn, transform, errorTransform, data, timestamp;
+    return (0, _regeneratorRuntime2["default"])().wrap(function _callee5$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
         case 0:
-          _context5.prev = 0;
-          _context5.next = 3;
+          _context6.prev = 0;
+          _context6.next = 3;
           return (0, _effects.select)(selectDataSource(formKey, name));
         case 3:
-          _yield$select2 = _context5.sent;
+          _yield$select2 = _context6.sent;
           fn = _yield$select2.fn;
           transform = _yield$select2.transform;
-          _context5.next = 8;
+          errorTransform = _yield$select2.errorTransform;
+          _context6.next = 9;
           return _effects.call.apply(void 0, [fn].concat((0, _toConsumableArray2["default"])(params)));
-        case 8:
-          data = _context5.sent;
-          _context5.next = 11;
+        case 9:
+          data = _context6.sent;
+          _context6.next = 12;
           return (0, _effects.call)(getTimestamp);
-        case 11:
-          timestamp = _context5.sent;
-          _context5.next = 14;
+        case 12:
+          timestamp = _context6.sent;
+          _context6.next = 15;
           return (0, _effects.put)((0, _store.action)('RESOLVE_DATA_SOURCE', {
             formKey: formKey,
             name: name,
             data: transform ? transform(data) : data,
+            error: errorTransform ? errorTransform(data) : null,
             timestamp: timestamp
           }));
-        case 14:
-          _context5.next = 19;
+        case 15:
+          _context6.next = 20;
           break;
-        case 16:
-          _context5.prev = 16;
-          _context5.t0 = _context5["catch"](0);
-          console.error(_context5.t0);
-        case 19:
+        case 17:
+          _context6.prev = 17;
+          _context6.t0 = _context6["catch"](0);
+          console.error(_context6.t0);
+        case 20:
         case "end":
-          return _context5.stop();
+          return _context6.stop();
       }
-    }, _callee4, null, [[0, 16]]);
+    }, _callee5, null, [[0, 17]]);
   })();
 }));
-(0, _store.regSaga)('HANDLE_SET_VALUE', /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee6() {
-  return (0, _regeneratorRuntime2["default"])().wrap(function _callee6$(_context7) {
-    while (1) switch (_context7.prev = _context7.next) {
+(0, _store.regSaga)('HANDLE_SET_VALUE', /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee7() {
+  return (0, _regeneratorRuntime2["default"])().wrap(function _callee7$(_context8) {
+    while (1) switch (_context8.prev = _context8.next) {
       case 0:
-        _context7.next = 2;
-        return (0, _effects.takeEvery)(['SET_VALUE', 'TOGGLE_MULTI_VALUE'], function (_ref18) {
-          var _ref18$payload = _ref18.payload,
-            formKey = _ref18$payload.formKey,
-            name = _ref18$payload.name,
-            triggerChange = _ref18$payload.triggerChange;
-          return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee5() {
+        _context8.next = 2;
+        return (0, _effects.takeEvery)(['SET_VALUE', 'TOGGLE_MULTI_VALUE'], function (_ref19) {
+          var _ref19$payload = _ref19.payload,
+            formKey = _ref19$payload.formKey,
+            name = _ref19$payload.name,
+            triggerChange = _ref19$payload.triggerChange;
+          return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee6() {
             var _yield$select3, bindings, fields, _fields$get, _onChange;
-            return (0, _regeneratorRuntime2["default"])().wrap(function _callee5$(_context6) {
-              while (1) switch (_context6.prev = _context6.next) {
+            return (0, _regeneratorRuntime2["default"])().wrap(function _callee6$(_context7) {
+              while (1) switch (_context7.prev = _context7.next) {
                 case 0:
-                  _context6.prev = 0;
+                  _context7.prev = 0;
                   if (!triggerChange) {
-                    _context6.next = 11;
+                    _context7.next = 11;
                     break;
                   }
-                  _context6.next = 4;
+                  _context7.next = 4;
                   return (0, _effects.select)(selectForm(formKey));
                 case 4:
-                  _yield$select3 = _context6.sent;
+                  _yield$select3 = _context7.sent;
                   bindings = _yield$select3.bindings;
                   fields = _yield$select3.fields;
                   _fields$get = fields.get(name), _onChange = _fields$get.onChange;
                   if (!_onChange) {
-                    _context6.next = 11;
+                    _context7.next = 11;
                     break;
                   }
-                  _context6.next = 11;
+                  _context7.next = 11;
                   return (0, _effects.call)(_onChange, bindings, bindActions(formKey));
                 case 11:
-                  _context6.next = 16;
+                  _context7.next = 16;
                   break;
                 case 13:
-                  _context6.prev = 13;
-                  _context6.t0 = _context6["catch"](0);
-                  console.error(_context6.t0);
+                  _context7.prev = 13;
+                  _context7.t0 = _context7["catch"](0);
+                  console.error(_context7.t0);
                 case 16:
                 case "end":
-                  return _context6.stop();
+                  return _context7.stop();
               }
-            }, _callee5, null, [[0, 13]]);
+            }, _callee6, null, [[0, 13]]);
           })();
         });
       case 2:
       case "end":
-        return _context7.stop();
+        return _context8.stop();
     }
-  }, _callee6);
+  }, _callee7);
 }));
-(0, _store.regSaga)((0, _effects.takeEvery)('REJECT_DATA_SOURCE', function (_ref19) {
-  var payload = _ref19.payload;
-  return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee7() {
-    return (0, _regeneratorRuntime2["default"])().wrap(function _callee7$(_context8) {
-      while (1) switch (_context8.prev = _context8.next) {
+(0, _store.regSaga)((0, _effects.takeEvery)('REJECT_DATA_SOURCE', function (_ref20) {
+  var payload = _ref20.payload;
+  return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee8() {
+    return (0, _regeneratorRuntime2["default"])().wrap(function _callee8$(_context9) {
+      while (1) switch (_context9.prev = _context9.next) {
         case 0:
-          _context8.next = 2;
+          _context9.next = 2;
           return (0, _effects.call)(console.error, 'REJECT_DATA_SOURCE', payload);
         case 2:
         case "end":
-          return _context8.stop();
+          return _context9.stop();
       }
-    }, _callee7);
+    }, _callee8);
   })();
 }));
-(0, _store.regSaga)((0, _effects.takeEvery)('SUBMIT', function (_ref20) {
-  var _ref20$payload = _ref20.payload,
-    formKey = _ref20$payload.formKey,
-    fieldSet = _ref20$payload.fieldSet,
-    onInvalid = _ref20$payload.onInvalid;
-  return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee8() {
+(0, _store.regSaga)((0, _effects.takeEvery)('SUBMIT', function (_ref21) {
+  var _ref21$payload = _ref21.payload,
+    formKey = _ref21$payload.formKey,
+    fieldSet = _ref21$payload.fieldSet,
+    onInvalid = _ref21$payload.onInvalid,
+    onSaveOverride = _ref21$payload.onSave;
+  return /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee9() {
     var _yield$select4, bindings, fields, _onSubmit, onSave, onError, computedFieldSet, values, errors, result;
-    return (0, _regeneratorRuntime2["default"])().wrap(function _callee8$(_context9) {
-      while (1) switch (_context9.prev = _context9.next) {
+    return (0, _regeneratorRuntime2["default"])().wrap(function _callee9$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
         case 0:
-          _context9.prev = 0;
-          _context9.next = 3;
+          _context10.prev = 0;
+          _context10.next = 3;
           return (0, _effects.select)(selectForm(formKey));
         case 3:
-          _yield$select4 = _context9.sent;
+          _yield$select4 = _context10.sent;
           bindings = _yield$select4.bindings;
           fields = _yield$select4.fields;
           _onSubmit = _yield$select4.onSubmit;
@@ -544,44 +585,44 @@ function runDataSource(formKey, name, dataSource) {
             return !errors.isEmpty();
           });
           if (!errors.isEmpty()) {
-            _context9.next = 32;
+            _context10.next = 32;
             break;
           }
-          _context9.prev = 13;
-          _context9.next = 16;
+          _context10.prev = 13;
+          _context10.next = 16;
           return (0, _effects.call)(_onSubmit, values, bindings);
         case 16:
-          result = _context9.sent;
+          result = _context10.sent;
           (0, _store.dispatch)('SUBMIT_SUCCESS', {
             formKey: formKey
           });
-          if (!onSave) {
-            _context9.next = 21;
+          if (!(onSaveOverride || onSave)) {
+            _context10.next = 21;
             break;
           }
-          _context9.next = 21;
-          return (0, _effects.call)(onSave, result);
+          _context10.next = 21;
+          return (0, _effects.call)(onSaveOverride || onSave, result);
         case 21:
-          _context9.next = 30;
+          _context10.next = 30;
           break;
         case 23:
-          _context9.prev = 23;
-          _context9.t0 = _context9["catch"](13);
+          _context10.prev = 23;
+          _context10.t0 = _context10["catch"](13);
           (0, _store.dispatch)('SUBMIT_ERROR', {
             formKey: formKey,
-            error: typeof _context9.t0 === 'string' ? _context9.t0 : 'Unexpected error occurred'
+            error: typeof _context10.t0 === 'string' ? _context10.t0 : 'Unexpected error occurred'
           });
-          if (typeof _context9.t0 !== 'string') {
-            console.error('Error handling  form submit', _context9.t0);
+          if (typeof _context10.t0 !== 'string') {
+            console.error('Error handling  form submit', _context10.t0);
           }
           if (!onError) {
-            _context9.next = 30;
+            _context10.next = 30;
             break;
           }
-          _context9.next = 30;
-          return (0, _effects.call)(onError, _context9.t0);
+          _context10.next = 30;
+          return (0, _effects.call)(onError, _context10.t0);
         case 30:
-          _context9.next = 34;
+          _context10.next = 34;
           break;
         case 32:
           (0, _store.dispatch)('SUBMIT_FIELD_ERRORS', {
@@ -592,17 +633,17 @@ function runDataSource(formKey, name, dataSource) {
             onInvalid(errors);
           }
         case 34:
-          _context9.next = 39;
+          _context10.next = 39;
           break;
         case 36:
-          _context9.prev = 36;
-          _context9.t1 = _context9["catch"](0);
-          console.error(_context9.t1);
+          _context10.prev = 36;
+          _context10.t1 = _context10["catch"](0);
+          console.error(_context10.t1);
         case 39:
         case "end":
-          return _context9.stop();
+          return _context10.stop();
       }
-    }, _callee8, null, [[0, 36], [13, 23]]);
+    }, _callee9, null, [[0, 36], [13, 23]]);
   })();
 }));
 var setValue = exports.setValue = function setValue(formKey, name, value) {
@@ -648,16 +689,16 @@ var actions = {
   }
 };
 var bindActions = function bindActions(formKey) {
-  return Object.entries(actions).reduce(function (acc, _ref21) {
-    var _ref22 = (0, _slicedToArray2["default"])(_ref21, 2),
-      name = _ref22[0],
-      fn = _ref22[1];
+  return Object.entries(actions).reduce(function (acc, _ref22) {
+    var _ref23 = (0, _slicedToArray2["default"])(_ref22, 2),
+      name = _ref23[0],
+      fn = _ref23[1];
     return (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, acc), {}, (0, _defineProperty2["default"])({}, name, fn(formKey)));
   }, {});
 };
-var onFocus = exports.onFocus = function onFocus(_ref23) {
-  var formKey = _ref23.formKey,
-    name = _ref23.name;
+var onFocus = exports.onFocus = function onFocus(_ref24) {
+  var formKey = _ref24.formKey,
+    name = _ref24.name;
   return function () {
     (0, _store.dispatch)('FOCUS_FIELD', {
       formKey: formKey,
@@ -665,9 +706,9 @@ var onFocus = exports.onFocus = function onFocus(_ref23) {
     });
   };
 };
-var onBlur = exports.onBlur = function onBlur(_ref24) {
-  var formKey = _ref24.formKey,
-    name = _ref24.name;
+var onBlur = exports.onBlur = function onBlur(_ref25) {
+  var formKey = _ref25.formKey,
+    name = _ref25.name;
   return function () {
     (0, _store.dispatch)('BLUR_FIELD', {
       formKey: formKey,
@@ -676,10 +717,10 @@ var onBlur = exports.onBlur = function onBlur(_ref24) {
   };
 };
 var LIST_VALUE_TYPES = ['checkbox-multi'];
-var onChange = exports.onChange = function onChange(_ref25) {
-  var formKey = _ref25.formKey,
-    type = _ref25.type,
-    name = _ref25.name;
+var onChange = exports.onChange = function onChange(_ref26) {
+  var formKey = _ref26.formKey,
+    type = _ref26.type,
+    name = _ref26.name;
   return function (event) {
     var value;
     if (type === 'checkbox' && event && event.target) {
@@ -740,6 +781,15 @@ var resetForm = exports.resetForm = function resetForm(formKey) {
     formKey: formKey
   });
 };
+var reloadDataSources = exports.reloadDataSources = function reloadDataSources(formKey) {
+  for (var _len = arguments.length, dataSourceNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    dataSourceNames[_key - 1] = arguments[_key];
+  }
+  return (0, _store.dispatch)('RELOAD_DATA_SOURCES', {
+    formKey: formKey,
+    dataSourceNames: dataSourceNames
+  });
+};
 var reloadDataSource = exports.reloadDataSource = function reloadDataSource(formKey, name) {
   return (0, _store.dispatch)('CALL_DATA_SOURCE', {
     formKey: formKey,
@@ -749,25 +799,27 @@ var reloadDataSource = exports.reloadDataSource = function reloadDataSource(form
 var configureForm = exports.configureForm = function configureForm(config) {
   return (0, _store.dispatch)('CONFIGURE_FORM', config);
 };
-var submitForm = exports.submitForm = function submitForm(formKey, _ref26) {
-  var fieldSet = _ref26.fieldSet,
-    onInvalid = _ref26.onInvalid,
-    values = _ref26.values;
+var submitForm = exports.submitForm = function submitForm(formKey, _ref27) {
+  var fieldSet = _ref27.fieldSet,
+    onInvalid = _ref27.onInvalid,
+    values = _ref27.values,
+    onSave = _ref27.onSave;
   return (0, _store.dispatch)('SUBMIT', {
     formKey: formKey,
     fieldSet: fieldSet,
     onInvalid: onInvalid,
-    values: values
+    values: values,
+    onSave: onSave
   });
 };
 var serializeForm = exports.serializeForm = function serializeForm(formKey) {
-  var _ref27 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    fieldSet = _ref27.fieldSet;
+  var _ref28 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    fieldSet = _ref28.fieldSet;
   return serializeImpl(selectForm(formKey)(_store.store.getState()), fieldSet);
 };
-var serializeImpl = function serializeImpl(_ref28, fieldSet) {
-  var bindings = _ref28.bindings,
-    fields = _ref28.fields;
+var serializeImpl = function serializeImpl(_ref29, fieldSet) {
+  var bindings = _ref29.bindings,
+    fields = _ref29.fields;
   var computedFieldSet = computeFieldSet(fields, fieldSet);
   return fields.filter(function (field) {
     return !field["transient"] && computedFieldSet.contains(field.name);
@@ -775,6 +827,28 @@ var serializeImpl = function serializeImpl(_ref28, fieldSet) {
     return field.serialize ? field.serialize(bindings) : field.value;
   });
 };
+var validateForm = exports.validateForm = function validateForm(formKey) {
+  var _ref30 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    fieldSet = _ref30.fieldSet;
+  var _selectForm = selectForm(formKey)(_store.store.getState()),
+    fields = _selectForm.fields;
+  var computedFieldSet = computeFieldSet(fields, fieldSet);
+  var errors = fields.filter(function (field) {
+    return computedFieldSet.contains(field.name);
+  }).map(function (field) {
+    return field.errors;
+  }).filter(function (errors) {
+    return !errors.isEmpty();
+  });
+  if (!errors.isEmpty()) {
+    (0, _store.dispatch)('VALIDATION_FIELD_ERRORS', {
+      formKey: formKey,
+      fieldNames: errors.keySeq()
+    });
+    return false;
+  }
+  return true;
+};
 
 // Wraps the FormImpl to handle the formKey behavior. If this is passed a
 // formKey prop this wrapper is essentially a noop, but if it is not passed a
@@ -784,8 +858,8 @@ var serializeImpl = function serializeImpl(_ref28, fieldSet) {
 // to do this because we need to use the form key in the mapStateToProps of the
 // wrapped component.
 
-/**
- * @component
+/**
+ * @component
  */
 var Form = exports.Form = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(Form, _Component);
@@ -844,8 +918,8 @@ var FormImplComponent = /*#__PURE__*/function (_Component2) {
   function FormImplComponent() {
     var _this3;
     (0, _classCallCheck2["default"])(this, FormImplComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
     }
     _this3 = _super2.call.apply(_super2, [this].concat(args));
     _this3.focusRef = /*#__PURE__*/(0, _react.createRef)();
@@ -900,20 +974,24 @@ var FormImplComponent = /*#__PURE__*/function (_Component2) {
         readOnly = _this$props2.readOnly;
       var bindings = formState ? formState.bindings : {};
       var initialized = formState ? !!formState.fields : false;
+      var errors = formState ? formState.dataSources.map(function (ds) {
+        return ds.error;
+      }).filter(Boolean) : (0, _immutable.Map)();
       var form = null;
+      var dirty = false;
+      var _components$toObject = components.toObject(),
+        FormButtons = _components$toObject.FormButtons,
+        FormError = _components$toObject.FormError,
+        FormLayout = _components$toObject.FormLayout;
       if (initialized) {
-        var _components$toObject = components.toObject(),
-          FormButtons = _components$toObject.FormButtons,
-          FormError = _components$toObject.FormError,
-          FormLayout = _components$toObject.FormLayout;
         var error = formState.error,
           fields = formState.fields,
           formOptions = formState.formOptions,
           submitting = formState.submitting;
-        // Build a map of components by field, merging the fields, addFields, and
-        var dirty = fields.some(function (field) {
+        dirty = fields.some(function (field) {
           return field.dirty;
         });
+        // Build a map of components by field, merging the fields, addFields, and
         // alterFields options. Note that we get those from the parent props not
         // redux store because we want to see new components on HMR updates.
         var fieldComponents = (0, _Form2.resolveFieldConfig)(formOptions, bindings, fieldsFn, addFields, alterFields).filter(function (fieldConfig) {
@@ -928,10 +1006,10 @@ var FormImplComponent = /*#__PURE__*/function (_Component2) {
           formOptions: formOptions,
           fields: (0, _immutable.OrderedMap)(computedFieldSet.map(function (name) {
             return [name, fields.get(name)];
-          })).mapEntries(function (_ref29, index) {
-            var _ref30 = (0, _slicedToArray2["default"])(_ref29, 2),
-              name = _ref30[0],
-              field = _ref30[1];
+          })).mapEntries(function (_ref31, index) {
+            var _ref32 = (0, _slicedToArray2["default"])(_ref31, 2),
+              name = _ref32[0],
+              field = _ref32[1];
             var FieldImpl = fieldComponents.get(name) || components.get((0, _Form2.getComponentName)(field), null);
             return [name, FieldImpl ? /*#__PURE__*/_react["default"].createElement(FieldImpl, Object.assign({
               key: name,
@@ -956,8 +1034,10 @@ var FormImplComponent = /*#__PURE__*/function (_Component2) {
           }),
           bindings: bindings,
           meta: fields.map(function (field) {
+            var _field$errors;
             return (0, _immutable.Map)({
-              visible: field.visible
+              visible: field.visible,
+              hasErrors: ((_field$errors = field.errors) === null || _field$errors === void 0 ? void 0 : _field$errors.size) > 0
             });
           })
         });
@@ -965,7 +1045,9 @@ var FormImplComponent = /*#__PURE__*/function (_Component2) {
       return typeof this.props.children === 'function' ? this.props.children({
         bindings: bindings,
         form: form,
-        initialized: initialized
+        initialized: initialized,
+        errors: errors,
+        dirty: dirty
       }) : form;
     }
   }]);
@@ -977,11 +1059,11 @@ var mapStateToProps = exports.mapStateToProps = function mapStateToProps(state,
   };
 };
 var FormImpl = (0, _store.connect)(mapStateToProps)(FormImplComponent);
-var generateForm = exports.generateForm = function generateForm(_ref31) {
-  var dataSources = _ref31.dataSources,
-    fields = _ref31.fields,
-    handleSubmit = _ref31.handleSubmit,
-    formOptions = _ref31.formOptions;
+var generateForm = exports.generateForm = function generateForm(_ref33) {
+  var dataSources = _ref33.dataSources,
+    fields = _ref33.fields,
+    handleSubmit = _ref33.handleSubmit,
+    formOptions = _ref33.formOptions;
   return function (configurationProps) {
     return /*#__PURE__*/_react["default"].createElement(Form, {
       addDataSources: configurationProps.addDataSources,