mobx-form 13.3.0 → 13.3.2

package/dist/mobx-form.cjs.js

@@ -268,13 +268,19 @@ class Field {
 
 
   restoreInitialValue({
-    resetInteractedFlag = true
+    resetInteractedFlag = true,
+    commit = true
   } = {}) {
     this.setValue(this._initialValue, {
-      resetInteractedFlag
+      resetInteractedFlag,
+      commit
     });
   }
 
+  get dirty() {
+    return this._initialValue !== this.value;
+  }
+
   commit() {
     this._initialValue = this.value;
   }
@@ -536,8 +542,10 @@ class Field {
       hasValue: mobx.computed,
       _autoValidate: mobx.observable,
       _value: mobx.observable,
+      _initialValue: mobx.observable,
       _interacted: mobx.observable,
       _blurredOnce: mobx.observable,
+      dirty: mobx.computed,
       blurred: mobx.computed,
       errorMessage: mobx.computed,
       rawError: mobx.observable.ref,
@@ -675,6 +683,18 @@ class FormModel {
   restoreInitialValues(opts) {
     this._eachField(field => field.restoreInitialValue(opts));
   }
+
+  commit() {
+    this._eachField(field => field.commit());
+  }
+
+  get dirty() {
+    return this._fieldKeys().some(key => {
+      const f = this._getField(key);
+
+      return f.dirty;
+    });
+  }
   /**
    * Set multiple values to more than one field a time using an object
    * where each key is the name of a field. The value will be set to each
@@ -852,11 +872,14 @@ class FormModel {
       resetInteractedFlag: mobx.action,
       disableFields: mobx.action,
       addFields: mobx.action,
-      enableFields: mobx.action
+      enableFields: mobx.action,
+      commit: mobx.action,
+      dirty: mobx.computed
     });
     this.addFields(descriptors);
     initialState && this.updateFrom(initialState, {
-      throwIfMissingField: options.throwIfMissingField
+      throwIfMissingField: options.throwIfMissingField,
+      commit: true
     });
   }
 

package/dist/mobx-form.esm.js

@@ -262,13 +262,19 @@ class Field {
 
 
   restoreInitialValue({
-    resetInteractedFlag = true
+    resetInteractedFlag = true,
+    commit = true
   } = {}) {
     this.setValue(this._initialValue, {
-      resetInteractedFlag
+      resetInteractedFlag,
+      commit
     });
   }
 
+  get dirty() {
+    return this._initialValue !== this.value;
+  }
+
   commit() {
     this._initialValue = this.value;
   }
@@ -530,8 +536,10 @@ class Field {
       hasValue: computed,
       _autoValidate: observable,
       _value: observable,
+      _initialValue: observable,
       _interacted: observable,
       _blurredOnce: observable,
+      dirty: computed,
       blurred: computed,
       errorMessage: computed,
       rawError: observable.ref,
@@ -669,6 +677,18 @@ class FormModel {
   restoreInitialValues(opts) {
     this._eachField(field => field.restoreInitialValue(opts));
   }
+
+  commit() {
+    this._eachField(field => field.commit());
+  }
+
+  get dirty() {
+    return this._fieldKeys().some(key => {
+      const f = this._getField(key);
+
+      return f.dirty;
+    });
+  }
   /**
    * Set multiple values to more than one field a time using an object
    * where each key is the name of a field. The value will be set to each
@@ -846,11 +866,14 @@ class FormModel {
       resetInteractedFlag: action,
       disableFields: action,
       addFields: action,
-      enableFields: action
+      enableFields: action,
+      commit: action,
+      dirty: computed
     });
     this.addFields(descriptors);
     initialState && this.updateFrom(initialState, {
-      throwIfMissingField: options.throwIfMissingField
+      throwIfMissingField: options.throwIfMissingField,
+      commit: true
     });
   }
 

package/dist/mobx-form.legacy.js

@@ -277,10 +277,13 @@ var Field = /*#__PURE__*/function () {
     value: function restoreInitialValue() {
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$resetInteracted = _ref2.resetInteractedFlag,
-          resetInteractedFlag = _ref2$resetInteracted === void 0 ? true : _ref2$resetInteracted;
+          resetInteractedFlag = _ref2$resetInteracted === void 0 ? true : _ref2$resetInteracted,
+          _ref2$commit = _ref2.commit,
+          commit = _ref2$commit === void 0 ? true : _ref2$commit;
 
       this.setValue(this._initialValue, {
-        resetInteractedFlag: resetInteractedFlag
+        resetInteractedFlag: resetInteractedFlag,
+        commit: commit
       });
     }
   }, {
@@ -668,6 +671,11 @@ var Field = /*#__PURE__*/function () {
     set: function set(val) {
       this._setValue(val);
     }
+  }, {
+    key: "dirty",
+    get: function get() {
+      return this._initialValue !== this.value;
+    }
   }, {
     key: "originalErrorMessage",
     get: function get() {
@@ -741,8 +749,10 @@ var Field = /*#__PURE__*/function () {
       hasValue: mobx.computed,
       _autoValidate: mobx.observable,
       _value: mobx.observable,
+      _initialValue: mobx.observable,
       _interacted: mobx.observable,
       _blurredOnce: mobx.observable,
+      dirty: mobx.computed,
       blurred: mobx.computed,
       errorMessage: mobx.computed,
       rawError: mobx.observable.ref,
@@ -830,15 +840,22 @@ var FormModel = /*#__PURE__*/function () {
         return field.restoreInitialValue(opts);
       });
     }
+  }, {
+    key: "commit",
+    value: function commit() {
+      this._eachField(function (field) {
+        return field.commit();
+      });
+    }
+  }, {
+    key: "updateFrom",
+
     /**
      * Set multiple values to more than one field a time using an object
      * where each key is the name of a field. The value will be set to each
      * field and from that point on the values set are considered the new
      * initial values. Validation and interacted flags are also reset if the second argument is true
      * */
-
-  }, {
-    key: "updateFrom",
     value: function updateFrom(obj) {
       var _this = this;
 
@@ -981,12 +998,23 @@ var FormModel = /*#__PURE__*/function () {
       });
     }
   }, {
-    key: "summary",
+    key: "dirty",
     get: function get() {
       var _this8 = this;
 
+      return this._fieldKeys().some(function (key) {
+        var f = _this8._getField(key);
+
+        return f.dirty;
+      });
+    }
+  }, {
+    key: "summary",
+    get: function get() {
+      var _this9 = this;
+
       return this._fieldKeys().reduce(function (seq, key) {
-        var field = _this8.fields[key];
+        var field = _this9.fields[key];
 
         if (field.errorMessage) {
           seq.push(field.errorMessage);
@@ -998,10 +1026,10 @@ var FormModel = /*#__PURE__*/function () {
   }, {
     key: "validating",
     get: function get() {
-      var _this9 = this;
+      var _this10 = this;
 
       return this._validating || this._fieldKeys().some(function (key) {
-        var f = _this9._getField(key);
+        var f = _this10._getField(key);
 
         return f.validating;
       });
@@ -1009,11 +1037,11 @@ var FormModel = /*#__PURE__*/function () {
   }, {
     key: "serializedData",
     get: function get() {
-      var _this10 = this;
+      var _this11 = this;
 
       var keys = Object.keys(this.fields);
       return mobx.toJS(keys.reduce(function (seq, key) {
-        var field = _this10.fields[key];
+        var field = _this11.fields[key];
         var value = mobx.toJS(field.value); // this is required to make sure forms that use the serializedData object
         // have the values without leading or trailing spaces
 
@@ -1034,7 +1062,7 @@ var FormModel = /*#__PURE__*/function () {
   }]);
 
   function FormModel() {
-    var _this11 = this;
+    var _this12 = this;
 
     var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
         _ref2$descriptors = _ref2.descriptors,
@@ -1049,7 +1077,7 @@ var FormModel = /*#__PURE__*/function () {
     this._validating = false;
 
     this.setValidating = function (validating) {
-      _this11._validating = validating;
+      _this12._validating = validating;
     };
 
     this.addFields = function (fieldsDescriptor) {
@@ -1063,7 +1091,7 @@ var FormModel = /*#__PURE__*/function () {
               name = field.name,
               descriptor = _objectWithoutProperties(field, ["value", "name"]);
 
-          _this11._createField({
+          _this12._createField({
             value: value,
             name: name,
             descriptor: descriptor
@@ -1078,7 +1106,7 @@ var FormModel = /*#__PURE__*/function () {
             value = _fieldsDescriptor$key.value,
             descriptor = _objectWithoutProperties(_fieldsDescriptor$key, ["value"]);
 
-        _this11._createField({
+        _this12._createField({
           value: value,
           name: key,
           descriptor: descriptor
@@ -1107,11 +1135,14 @@ var FormModel = /*#__PURE__*/function () {
       resetInteractedFlag: mobx.action,
       disableFields: mobx.action,
       addFields: mobx.action,
-      enableFields: mobx.action
+      enableFields: mobx.action,
+      commit: mobx.action,
+      dirty: mobx.computed
     });
     this.addFields(descriptors);
     initialState && this.updateFrom(initialState, {
-      throwIfMissingField: options.throwIfMissingField
+      throwIfMissingField: options.throwIfMissingField,
+      commit: true
     });
   }
 
@@ -1133,10 +1164,10 @@ var FormModel = /*#__PURE__*/function () {
   }, {
     key: "_eachField",
     value: function _eachField(cb) {
-      var _this12 = this;
+      var _this13 = this;
 
       Object.keys(this.fields).forEach(function (key) {
-        return cb(_this12.fields[key]);
+        return cb(_this13.fields[key]);
       });
     }
   }, {
@@ -1154,11 +1185,11 @@ var FormModel = /*#__PURE__*/function () {
   }, {
     key: "disableFields",
     value: function disableFields(fieldKeys) {
-      var _this13 = this;
+      var _this14 = this;
 
       if (!Array.isArray(fieldKeys)) throw new TypeError('fieldKeys should be an array with the names of the fields to disable');
       fieldKeys.forEach(function (key) {
-        var field = _this13._getField(key);
+        var field = _this14._getField(key);
 
         field.setDisabled(true);
       });
@@ -1174,11 +1205,11 @@ var FormModel = /*#__PURE__*/function () {
   }, {
     key: "enableFields",
     value: function enableFields(fieldKeys) {
-      var _this14 = this;
+      var _this15 = this;
 
       if (!Array.isArray(fieldKeys)) throw new TypeError('fieldKeys should be an array with the names of the fields to disable');
       fieldKeys.forEach(function (key) {
-        var field = _this14._getField(key);
+        var field = _this15._getField(key);
 
         field.setDisabled(false);
       });
@@ -1186,10 +1217,10 @@ var FormModel = /*#__PURE__*/function () {
   }, {
     key: "resetValidatedOnce",
     value: function resetValidatedOnce() {
-      var _this15 = this;
+      var _this16 = this;
 
       this._fieldKeys().forEach(function (key) {
-        _this15.fields[key].resetValidatedOnce();
+        _this16.fields[key].resetValidatedOnce();
       });
     }
   }]);

package/dist/mobx-form.umd.js

@@ -337,10 +337,13 @@
       value: function restoreInitialValue() {
         var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
             _ref2$resetInteracted = _ref2.resetInteractedFlag,
-            resetInteractedFlag = _ref2$resetInteracted === void 0 ? true : _ref2$resetInteracted;
+            resetInteractedFlag = _ref2$resetInteracted === void 0 ? true : _ref2$resetInteracted,
+            _ref2$commit = _ref2.commit,
+            commit = _ref2$commit === void 0 ? true : _ref2$commit;
 
         this.setValue(this._initialValue, {
-          resetInteractedFlag: resetInteractedFlag
+          resetInteractedFlag: resetInteractedFlag,
+          commit: commit
         });
       }
     }, {
@@ -728,6 +731,11 @@
       set: function set(val) {
         this._setValue(val);
       }
+    }, {
+      key: "dirty",
+      get: function get() {
+        return this._initialValue !== this.value;
+      }
     }, {
       key: "originalErrorMessage",
       get: function get() {
@@ -801,8 +809,10 @@
         hasValue: mobx.computed,
         _autoValidate: mobx.observable,
         _value: mobx.observable,
+        _initialValue: mobx.observable,
         _interacted: mobx.observable,
         _blurredOnce: mobx.observable,
+        dirty: mobx.computed,
         blurred: mobx.computed,
         errorMessage: mobx.computed,
         rawError: mobx.observable.ref,
@@ -890,15 +900,22 @@
           return field.restoreInitialValue(opts);
         });
       }
+    }, {
+      key: "commit",
+      value: function commit() {
+        this._eachField(function (field) {
+          return field.commit();
+        });
+      }
+    }, {
+      key: "updateFrom",
+
       /**
        * Set multiple values to more than one field a time using an object
        * where each key is the name of a field. The value will be set to each
        * field and from that point on the values set are considered the new
        * initial values. Validation and interacted flags are also reset if the second argument is true
        * */
-
-    }, {
-      key: "updateFrom",
       value: function updateFrom(obj) {
         var _this = this;
 
@@ -1041,12 +1058,23 @@
         });
       }
     }, {
-      key: "summary",
+      key: "dirty",
       get: function get() {
         var _this8 = this;
 
+        return this._fieldKeys().some(function (key) {
+          var f = _this8._getField(key);
+
+          return f.dirty;
+        });
+      }
+    }, {
+      key: "summary",
+      get: function get() {
+        var _this9 = this;
+
         return this._fieldKeys().reduce(function (seq, key) {
-          var field = _this8.fields[key];
+          var field = _this9.fields[key];
 
           if (field.errorMessage) {
             seq.push(field.errorMessage);
@@ -1058,10 +1086,10 @@
     }, {
       key: "validating",
       get: function get() {
-        var _this9 = this;
+        var _this10 = this;
 
         return this._validating || this._fieldKeys().some(function (key) {
-          var f = _this9._getField(key);
+          var f = _this10._getField(key);
 
           return f.validating;
         });
@@ -1069,11 +1097,11 @@
     }, {
       key: "serializedData",
       get: function get() {
-        var _this10 = this;
+        var _this11 = this;
 
         var keys = Object.keys(this.fields);
         return mobx.toJS(keys.reduce(function (seq, key) {
-          var field = _this10.fields[key];
+          var field = _this11.fields[key];
           var value = mobx.toJS(field.value); // this is required to make sure forms that use the serializedData object
           // have the values without leading or trailing spaces
 
@@ -1094,7 +1122,7 @@
     }]);
 
     function FormModel() {
-      var _this11 = this;
+      var _this12 = this;
 
       var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
           _ref2$descriptors = _ref2.descriptors,
@@ -1109,7 +1137,7 @@
       this._validating = false;
 
       this.setValidating = function (validating) {
-        _this11._validating = validating;
+        _this12._validating = validating;
       };
 
       this.addFields = function (fieldsDescriptor) {
@@ -1123,7 +1151,7 @@
                 name = field.name,
                 descriptor = _objectWithoutProperties(field, ["value", "name"]);
 
-            _this11._createField({
+            _this12._createField({
               value: value,
               name: name,
               descriptor: descriptor
@@ -1138,7 +1166,7 @@
               value = _fieldsDescriptor$key.value,
               descriptor = _objectWithoutProperties(_fieldsDescriptor$key, ["value"]);
 
-          _this11._createField({
+          _this12._createField({
             value: value,
             name: key,
             descriptor: descriptor
@@ -1167,11 +1195,14 @@
         resetInteractedFlag: mobx.action,
         disableFields: mobx.action,
         addFields: mobx.action,
-        enableFields: mobx.action
+        enableFields: mobx.action,
+        commit: mobx.action,
+        dirty: mobx.computed
       });
       this.addFields(descriptors);
       initialState && this.updateFrom(initialState, {
-        throwIfMissingField: options.throwIfMissingField
+        throwIfMissingField: options.throwIfMissingField,
+        commit: true
       });
     }
 
@@ -1193,10 +1224,10 @@
     }, {
       key: "_eachField",
       value: function _eachField(cb) {
-        var _this12 = this;
+        var _this13 = this;
 
         Object.keys(this.fields).forEach(function (key) {
-          return cb(_this12.fields[key]);
+          return cb(_this13.fields[key]);
         });
       }
     }, {
@@ -1214,11 +1245,11 @@
     }, {
       key: "disableFields",
       value: function disableFields(fieldKeys) {
-        var _this13 = this;
+        var _this14 = this;
 
         if (!Array.isArray(fieldKeys)) throw new TypeError('fieldKeys should be an array with the names of the fields to disable');
         fieldKeys.forEach(function (key) {
-          var field = _this13._getField(key);
+          var field = _this14._getField(key);
 
           field.setDisabled(true);
         });
@@ -1234,11 +1265,11 @@
     }, {
       key: "enableFields",
       value: function enableFields(fieldKeys) {
-        var _this14 = this;
+        var _this15 = this;
 
         if (!Array.isArray(fieldKeys)) throw new TypeError('fieldKeys should be an array with the names of the fields to disable');
         fieldKeys.forEach(function (key) {
-          var field = _this14._getField(key);
+          var field = _this15._getField(key);
 
           field.setDisabled(false);
         });
@@ -1246,10 +1277,10 @@
     }, {
       key: "resetValidatedOnce",
       value: function resetValidatedOnce() {
-        var _this15 = this;
+        var _this16 = this;
 
         this._fieldKeys().forEach(function (key) {
-          _this15.fields[key].resetValidatedOnce();
+          _this16.fields[key].resetValidatedOnce();
         });
       }
     }]);

package/mobx-form.d.ts

@@ -1,6 +1,8 @@
 declare module 'mobx-form' {
+  
+  export type Ret = boolean | { error: string } | void;
   export interface IValidatorFn<FieldType, ModelType> {
-    (field: IField<FieldType, ModelType>, fields: { [P in keyof ModelType]: IField<ModelType[P], ModelType> }, formModel: IFormModel<ModelType>): Promise<void>;
+    (field: IField<FieldType, ModelType>, fields: { [P in keyof ModelType]: IField<ModelType[P], ModelType> }, formModel: IFormModel<ModelType>): Promise<Ret> | Ret;
   }
 
   export interface IHasValueFn<T> {
@@ -137,11 +139,15 @@ declare module 'mobx-form' {
 
     interacted: boolean;
 
-    restoreInitialValues(options?: ResetInteractedFlagType): void;
+    dirty: boolean;
+
+    commit(): void;
+
+    restoreInitialValues(options?: SetValueFnArgs): void;
 
     resetInteractedFlag(options?: ResetInteractedFlagType): void;
 
-    updateFrom(obj: Partial<T>, options?: ResetInteractedFlagType): void;
+    updateFrom(obj: Partial<T>, options?: SetValueFnArgs): void;
 
     enableFields(fieldNames: string[]): void;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobx-form",
-  "version": "13.3.0",
+  "version": "13.3.2",
   "description": "A simple form helper for mobx",
   "main": "dist/mobx-form.cjs.js",
   "_browser": "dist/mobx-form.umd.js",