fix(core): toggle control when hide changed programmatically (#1888)

fix #1817, fix #1742
ngx-formly · Oct 30, 2019 · fdb1cbe · fdb1cbe
1 parent fb8485d
commit fdb1cbe
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 6 deletions.
diff --git a/src/core/src/lib/components/formly.field.config.ts b/src/core/src/lib/components/formly.field.config.ts
@@ -254,6 +254,7 @@ export interface FormlyFormOptionsCache extends FormlyFormOptions {
   _buildForm?: () => void;
   _componentFactoryResolver?: ComponentFactoryResolver;
   _injector?: Injector;
+  _hiddenFieldsForCheck?: FormlyFieldConfigCache[];
 }
 export interface FormlyFormOptions {
   updateInitialValue?: () => void;

diff --git a/src/core/src/lib/extensions/field-expression/field-expression.spec.ts b/src/core/src/lib/extensions/field-expression/field-expression.spec.ts
@@ -88,10 +88,28 @@ describe('FieldExpressionExtension', () => {
       expect(fields[0].hide).toBeFalsy();
       expect(fields[0].fieldGroup[0].hide).toBeTruthy();
 
-      expect(spy).toHaveBeenCalledTimes(2);
+      expect(spy).toHaveBeenCalledTimes(3);
       subscription.unsubscribe();
     });
 
+    it('should toggle field control when hide changed programmatically', () => {
+      const fields: FormlyFieldConfig[] = [
+        { hide: false, key: 'foo'},
+        { hide: true, key: 'bar'},
+      ];
+      builder.buildForm(form, fields, {}, options);
+
+      expect(form.get('foo')).not.toBeNull();
+      expect(form.get('bar')).toBeNull();
+
+      fields[0].hide = true;
+      fields[1].hide = false;
+      options._checkField({ formControl: form, fieldGroup: fields, options });
+
+      expect(form.get('foo')).toBeNull();
+      expect(form.get('bar')).not.toBeNull();
+    });
+
     it('should update field visibility within field arrays', () => {
       const fields: FormlyFieldConfig[] = [
         {

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 } from '../../utils';
+import { isObject, isNullOrUndefined, isFunction, defineHiddenProp, wrapProperty } from '../../utils';
 import { evalExpression, evalStringExpression, evalExpressionValueSetter } from './utils';
 import { Observable } from 'rxjs';
 import { FormlyExtension } from '../../services/formly.config';
@@ -75,6 +75,15 @@ export class FieldExpressionExtension implements FormlyExtension {
         field.hideExpression,
         parent && parent.hideExpression ? () => parent.hide : undefined,
       );
+    } else if (field.key) {
+      wrapProperty(field, 'hide', (newValue, oldValue) => {
+        if (
+          (oldValue === undefined && newValue === true)
+          || (oldValue !== undefined && newValue !== oldValue)
+        ) {
+          field.options._hiddenFieldsForCheck.push(field);
+        }
+      });
     }
   }
 
@@ -99,9 +108,6 @@ export class FieldExpressionExtension implements FormlyExtension {
 
   private _checkField(field: FormlyFieldConfigCache, ignoreCache = false) {
     const options = field.options as { _hiddenFieldsForCheck: FormlyFieldConfigCache[] };
-    if (!field.parent) {
-      options._hiddenFieldsForCheck = [];
-    }
 
     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
@@ -56,6 +56,10 @@ export class FormlyFormBuilder {
       defineHiddenProp(options, '_injector', this.injector);
     }
 
+    if (!options._hiddenFieldsForCheck) {
+      options._hiddenFieldsForCheck = [];
+    }
+
     if (!options._markForCheck) {
       options._markForCheck = (field) => {
         if (field._componentRefs) {

diff --git a/src/core/src/lib/utils.ts b/src/core/src/lib/utils.ts
@@ -149,7 +149,7 @@ export function defineHiddenProp(field: any, prop: string, defaultValue: any) {
   field[prop] = defaultValue;
 }
 
-export function wrapProperty<T = any>(field, prop, setFn: (newVal: T, oldVal?: T) => void) {
+export function wrapProperty<T = any>(field: any, prop: string, setFn: (newVal: T, oldVal?: T) => void) {
   let value = field[prop];
   setFn(value);