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 index 91ef0dbf6..90ec458ce 100644 --- 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 index 1a1aff605..e8efc26d9 100644 --- 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