fix(core): propagate disabled state to hidden fields (#1939)

fix #1932
ngx-formly · Nov 18, 2019 · 2cc9170 · 2cc9170
1 parent 1ea96f9
commit 2cc9170
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
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
@@ -403,6 +403,32 @@ describe('FieldExpressionExtension', () => {
         expect(fields[0].fieldGroup[0].templateOptions.disabled).toBeTruthy();
         expect(fields[0].fieldGroup[1].templateOptions.disabled).toBeFalsy();
       });
+
+      it('should update disabled state of hidden fields', () => {
+        const fields: FormlyFieldConfig[] = [
+          {
+            key: 'group',
+            expressionProperties: {
+              'templateOptions.disabled': 'model.disableToggle',
+            },
+            fieldGroup: [
+              { key: 'child', hide: true },
+            ],
+          },
+        ];
+
+        const model = {};
+        builder.buildForm(form, fields, model, options);
+
+        expect(fields[0].templateOptions.disabled).toEqual(false);
+        expect(fields[0].fieldGroup[0].templateOptions.disabled).toEqual(false);
+
+        model['group']['disableToggle'] = true;
+        options._checkField({ formControl: form, fieldGroup: fields, model, options });
+
+        expect(fields[0].templateOptions.disabled).toEqual(true);
+        expect(fields[0].fieldGroup[0].templateOptions.disabled).toEqual(true);
+      });
     });
 
     describe('expression as observable', () => {

diff --git a/src/core/src/lib/extensions/field-expression/field-expression.ts b/src/core/src/lib/extensions/field-expression/field-expression.ts
@@ -160,6 +160,10 @@ export class FieldExpressionExtension implements FormlyExtension {
           [expressionValue, field.model, field],
         );
 
+        if (key === 'templateOptions.disabled' && field.key) {
+          this.setDisabledState(field, expressionValue);
+        }
+
         if (key.indexOf('model.') === 0) {
           const path = key.replace(/^model\./, ''),
             control = field.key && key === path ? field.formControl : field.parent.formControl.get(path);
@@ -199,6 +203,18 @@ export class FieldExpressionExtension implements FormlyExtension {
     return markForCheck;
   }
 
+  private setDisabledState(field: FormlyFieldConfig, value: boolean) {
+    if (field.fieldGroup) {
+      field.fieldGroup
+        .filter(f => !f.expressionProperties || !f.expressionProperties.hasOwnProperty('templateOptions.disabled'))
+        .forEach(f => this.setDisabledState(f, value));
+    }
+
+    if (field.key && field.templateOptions.disabled !== value) {
+      field.templateOptions.disabled = value;
+    }
+  }
+
   private toggleFormControl(field: FormlyFieldConfig, hide: boolean) {
     if (field.fieldGroup) {
       field.fieldGroup