perf(core): reduce form _updateTreeValidity calls (#2078)

ngx-formly · Feb 5, 2020 · dad2ef6 · dad2ef6
1 parent a9842f1
commit dad2ef6
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 18 deletions.
diff --git a/src/core/src/lib/extensions/field-expression/field-expression.ts b/src/core/src/lib/extensions/field-expression/field-expression.ts
@@ -1,5 +1,5 @@
 import { FormlyFieldConfig, FormlyValueChangeEvent, FormlyFieldConfigCache } from '../../components/formly.field.config';
-import { isObject, isNullOrUndefined, isFunction, defineHiddenProp, wrapProperty } from '../../utils';
+import { isObject, isNullOrUndefined, isFunction, defineHiddenProp, wrapProperty, reduceFormUpdateValidityCalls } from '../../utils';
 import { evalExpression, evalStringExpression, evalExpressionValueSetter } from './utils';
 import { Observable } from 'rxjs';
 import { FormlyExtension } from '../../services/formly.config';
@@ -13,13 +13,10 @@ export class FieldExpressionExtension implements FormlyExtension {
     }
 
     field.options._checkField = (f, ignoreCache) => {
-      this._checkField(f, ignoreCache);
-
-      field.options._hiddenFieldsForCheck
-        .sort(f => f.hide ? -1 : 1)
-        .forEach(f => this.toggleFormControl(f, f.hide));
-
-      field.options._hiddenFieldsForCheck = [];
+      reduceFormUpdateValidityCalls(
+        f.formControl,
+        () => this.checkField(f, ignoreCache),
+      );
     };
   }
 
@@ -98,14 +95,6 @@ export class FieldExpressionExtension implements FormlyExtension {
     }
   }
 
-  postPopulate(field: FormlyFieldConfigCache) {
-    if (field.parent) {
-      return;
-    }
-
-    field.options._checkField(field, true);
-  }
-
   private _evalExpression(expression, parentExpression?) {
     expression = expression || (() => false);
     if (typeof expression === 'string') {
@@ -117,6 +106,16 @@ export class FieldExpressionExtension implements FormlyExtension {
       : expression;
   }
 
+  private checkField(field: FormlyFieldConfigCache, ignoreCache = false) {
+    this._checkField(field, ignoreCache);
+
+    field.options._hiddenFieldsForCheck
+      .sort(f => f.hide ? -1 : 1)
+      .forEach(f => this.toggleFormControl(f, f.hide));
+
+    field.options._hiddenFieldsForCheck = [];
+  }
+
   private _checkField(field: FormlyFieldConfigCache, ignoreCache = false) {
     let markForCheck = false;
     field.fieldGroup.forEach(f => {

diff --git a/src/core/src/lib/services/formly.form.builder.ts b/src/core/src/lib/services/formly.form.builder.ts
@@ -3,7 +3,7 @@ import { FormGroup, FormArray } from '@angular/forms';
 import { FormlyConfig } from './formly.config';
 import { FormlyFieldConfig, FormlyFormOptions, FormlyFieldConfigCache, FormlyValueChangeEvent, FormlyFormOptionsCache } from '../components/formly.field.config';
 import { Subject } from 'rxjs';
-import { defineHiddenProp } from '../utils';
+import { defineHiddenProp, reduceFormUpdateValidityCalls } from '../utils';
 
 @Injectable({ providedIn: 'root' })
 export class FormlyFormBuilder {
@@ -18,7 +18,9 @@ export class FormlyFormBuilder {
       throw new Error('NgxFormly: missing `forRoot()` call. use `forRoot()` when registering the `FormlyModule`.');
     }
 
-    this._buildForm({ fieldGroup, model, formControl, options: this._setOptions(options) });
+    const field = { fieldGroup, model, formControl, options: this._setOptions(options) };
+    reduceFormUpdateValidityCalls(formControl, () => this._buildForm(field));
+    field.options._checkField(field, true);
   }
 
   private _buildForm(field: FormlyFieldConfigCache) {

diff --git a/src/core/src/lib/utils.ts b/src/core/src/lib/utils.ts
@@ -201,3 +201,14 @@ export function wrapProperty<T = any>(
 
   return () => fns.splice(fns.indexOf(setFn), 1);
 }
+
+export function reduceFormUpdateValidityCalls(form: any, action: Function) {
+  const updateValidity = form._updateTreeValidity.bind(form);
+
+  let updateValidityArgs = null;
+  form._updateTreeValidity = (...args) => updateValidityArgs = args;
+  action();
+
+  updateValidityArgs && updateValidity(updateValidityArgs);
+  form._updateTreeValidity = updateValidity;
+}