fix: better handling of deep argument for showErrors() & `invalid…

…ate()` methods
foxhound87 · Jan 14, 2024 · bb99862 · bb99862
1 parent 9d748ab
commit bb99862
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 52 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+# 6.7.5 (master)
+- better handling of `deep` argument for `showErrors()` & `invalidate()` methods.
+- removed `mixed` mode warning
+
 # 6.7.4 (master)
 - Fix: extend hooks and handlers on form instance using set()
 

diff --git a/src/Base.ts b/src/Base.ts
@@ -448,7 +448,7 @@ export default class Base implements BaseInterface {
       if (!_.isNil($field) && !_.isUndefined(field)) {
         if (Array.isArray($field.values())) {
           const n: number = _.max(_.map(field.fields, (f, i) => Number(i))) ?? -1;
-          _.each(getObservableMapValues($field.fields), ($f) => {
+          getObservableMapValues($field.fields).forEach(($f) => {
             if (Number($f.name) > n) {
               $field.$changed ++;
               $field.state.form.$changed ++;

diff --git a/src/Field.ts b/src/Field.ts
@@ -292,9 +292,9 @@ export default class Field extends Base implements FieldInterface {
     return (
       (this.validationAsyncData?.valid === false &&
         !_.isEmpty(this.validationAsyncData)) ||
-      !_.isEmpty(this.validationErrorStack) ||
-      _.isString(this.errorAsync) ||
-      _.isString(this.errorSync)
+        !_.isEmpty(this.validationErrorStack) ||
+        _.isString(this.errorAsync) ||
+        _.isString(this.errorSync)
     );
   }
 
@@ -750,7 +750,8 @@ export default class Field extends Base implements FieldInterface {
       this.$resetting = false;
       this.$clearing = false;
     }))
-    if (deep) this.each((field: FieldInterface) => field.resetValidation(deep));
+
+    deep && this.each((field: FieldInterface) => field.resetValidation(deep));
   }
 
   clear(deep: boolean = true, execHook: boolean = true): void {
@@ -766,7 +767,7 @@ export default class Field extends Base implements FieldInterface {
       type: this.type,
     });
 
-    if (deep) this.each((field: FieldInterface) => field.clear(deep));
+    deep && this.each((field: FieldInterface) => field.clear(deep));
 
     this.state.options.get(OptionsEnum.validateOnClear, this)
       ? this.validate({
@@ -786,7 +787,7 @@ export default class Field extends Base implements FieldInterface {
     if (useDefaultValue) this.value = this.$default;
     if (!useDefaultValue) this.value = this.$initial;
 
-    if (deep) this.each((field: FieldInterface) => field.reset(deep));
+    deep && this.each((field: FieldInterface) => field.reset(deep));
 
     this.state.options.get(OptionsEnum.validateOnReset, this)
       ? this.validate({
@@ -811,10 +812,10 @@ export default class Field extends Base implements FieldInterface {
     this.$value = this.value.trim();
   }
 
-  showErrors(show: boolean = true): void {
+  showErrors(show: boolean = true, deep: boolean = true): void {
     this.showError = show;
     this.errorSync = _.head(this.validationErrorStack) as string;
-    this.each((field: FieldInterface) => field.showErrors(show));
+    deep && this.each((field: FieldInterface) => field.showErrors(show, deep));
   }
 
   showAsyncErrors(): void {
@@ -828,11 +829,8 @@ export default class Field extends Base implements FieldInterface {
   observeValidationOnBlur(): void {
     const opt = this.state.options;
     if (opt.get(OptionsEnum.validateOnBlur, this)) {
-      this.disposeValidationOnBlur = observe(
-        this,
-        "$focused",
-        (change) =>
-          change.newValue === false &&
+      this.disposeValidationOnBlur = observe(this, "$focused",
+        (change) => change.newValue === false &&
           this.debouncedValidation({
             showErrors: opt.get(OptionsEnum.showErrorsOnBlur, this),
           })
@@ -843,31 +841,21 @@ export default class Field extends Base implements FieldInterface {
   observeValidationOnChange(): void {
     const opt = this.state.options;
     if (opt.get(OptionsEnum.validateOnChange, this)) {
-      this.disposeValidationOnChange = observe(
-        this,
-        "$value",
-        () =>
-          !this.actionRunning &&
-          this.debouncedValidation({
-            showErrors: opt.get(OptionsEnum.showErrorsOnChange, this),
-          })
+      this.disposeValidationOnChange = observe(this, "$value", () =>
+        !this.actionRunning && this.debouncedValidation({
+          showErrors: opt.get(OptionsEnum.showErrorsOnChange, this),
+        })
       );
     } else if (
       opt.get(OptionsEnum.validateOnChangeAfterInitialBlur, this) ||
       opt.get(OptionsEnum.validateOnChangeAfterSubmit, this)
     ) {
-      this.disposeValidationOnChange = observe(
-        this,
-        "$value",
-        () =>
-          !this.actionRunning &&
-          ((opt.get(OptionsEnum.validateOnChangeAfterInitialBlur, this) &&
-            this.blurred) ||
-            (opt.get(OptionsEnum.validateOnChangeAfterSubmit, this) &&
-              this.state.form.submitted)) &&
-          this.debouncedValidation({
-            showErrors: opt.get(OptionsEnum.showErrorsOnChange, this),
-          })
+      this.disposeValidationOnChange = observe(this, "$value", () =>
+        !this.actionRunning && ((opt.get(OptionsEnum.validateOnChangeAfterInitialBlur, this) && this.blurred)
+        || (opt.get(OptionsEnum.validateOnChangeAfterSubmit, this) && this.state.form.submitted))
+        && this.debouncedValidation({
+          showErrors: opt.get(OptionsEnum.showErrorsOnChange, this),
+        })
       );
     }
   }

diff --git a/src/Form.ts b/src/Form.ts
@@ -172,10 +172,10 @@ export default class Form extends Base implements FormInterface {
   }
   */
 
-  invalidate(message: string | null = null): void {
+  invalidate(message: string | null = null, deep: boolean = true): void {
     this.debouncedValidation.cancel();
-    this.each((field: FieldInterface) => field.debouncedValidation.cancel());
     this.validator.error = message || this.state.options.get(OptionsEnum.defaultGenericError) || true;
+    deep && this.each((field: FieldInterface) => field.debouncedValidation.cancel());
   }
 
   showErrors(show: boolean = true): void {
@@ -184,7 +184,7 @@ export default class Form extends Base implements FormInterface {
 
   resetValidation(deep: boolean = true): void {
     this.validator.error = null;
-    this.each((field: FieldInterface) => field.resetValidation(deep));
+    deep && this.each((field: FieldInterface) => field.resetValidation(deep));
   }
 
   /**
@@ -194,7 +194,7 @@ export default class Form extends Base implements FormInterface {
     execHook && this.execHook(FieldPropsEnum.onClear);
     this.$touched = false;
     this.$changed = 0;
-    this.each((field: FieldInterface) => field.clear(deep));
+    deep && this.each((field: FieldInterface) => field.clear(deep));
   }
 
   /**
@@ -204,6 +204,6 @@ export default class Form extends Base implements FormInterface {
     execHook && this.execHook(FieldPropsEnum.onReset);
     this.$touched = false;
     this.$changed = 0;
-    this.each((field: FieldInterface) => field.reset(deep));
+    deep && this.each((field: FieldInterface) => field.reset(deep));
   }
 }
diff --git a/src/State.ts b/src/State.ts
@@ -73,16 +73,6 @@ export default class State implements StateInterface {
     const $unified :boolean = hasUnifiedProps(initial);
     const $separated: boolean = hasSeparatedProps(initial);
 
-    if ($unified && $separated) {
-      console.warn(
-        // eslint-disable-line
-        "WARNING: Your mobx-react-form instance ",
-        this.form.name,
-        " is running in MIXED Mode (Unified + Separated) as fields properties definition.",
-        "This mode is experimental, use it at your own risk, or use only one mode."
-      );
-    }
-
     if (($separated || isArrayOfStrings(initial.fields)) && !$unified) {
       const struct: any = $try(initial.struct, initial.fields);
       this.struct(struct);

diff --git a/src/models/FieldInterface.ts b/src/models/FieldInterface.ts
@@ -74,7 +74,7 @@ export interface FieldInterface extends BaseInterface {
   clear(deep?: boolean): void;
   reset(deep?: boolean): void;
   focus(): void;
-  showErrors(show: boolean): void;
+  showErrors(show?: boolean, deep?: boolean): void;
   showAsyncErrors(): void;
   observeValidationOnBlur(): void;
   observeValidationOnChange(): void;

diff --git a/src/models/FormInterface.ts b/src/models/FormInterface.ts
@@ -23,8 +23,8 @@ export interface FormInterface extends BaseInterface {
   disabled: boolean;
   // methods
   // init($fields: any): void;
-  invalidate(message?: string | null): void;
-  showErrors(show: boolean): void;
+  invalidate(message?: string | null, deep ?: boolean): void;
+  showErrors(show?: boolean): void;
   clear(deep?: boolean, execHook?: boolean): void;
   reset(deep?: boolean, execHook?: boolean): void;