fix(core): keep display: none for hidden fields when lazyRender is true

fix #3313
ngx-formly · May 27, 2022 · cc10cb9 · cc10cb9
1 parent 9fcabef
commit cc10cb9
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/core/src/lib/components/formly.field.ts b/src/core/src/lib/components/formly.field.ts
@@ -173,11 +173,12 @@ export class FormlyField implements OnInit, OnChanges, DoCheck, AfterContentInit
     this.hostObservers.forEach(unsubscribe => unsubscribe());
     this.hostObservers = [
       wrapProperty(this.field, 'hide', ({ firstChange, currentValue }) => {
+        if (!firstChange || (firstChange && currentValue)) {
+          this.renderer.setStyle(this.elementRef.nativeElement, 'display', currentValue ? 'none' : '');
+        }
+
         if (!this.formlyConfig.extras.lazyRender) {
           firstChange && this.renderField(this.containerRef, this.field);
-          if (!firstChange || (firstChange && currentValue)) {
-            this.renderer.setStyle(this.elementRef.nativeElement, 'display', currentValue ? 'none' : '');
-          }
         } else {
           if (currentValue) {
             this.containerRef.clear();

diff --git a/src/core/src/lib/components/formly.form.spec.ts b/src/core/src/lib/components/formly.form.spec.ts
@@ -279,10 +279,12 @@ describe('FormlyForm Component', () => {
     const fixture = createTestComponent('<formly-form [form]="form" [fields]="fields" [model]="model" [options]="options"></formly-form>');
     expect(fixture.debugElement.query(By.css('input'))).toBeNull();
     expect(getFormlyFieldElement(fixture.nativeElement).getAttribute('class')).toBeNull();
+    expect(getFormlyFieldElement(fixture.nativeElement).getAttribute('style')).toEqual(`display: none;`);
 
     app.fields[0].hide = false;
     expect(fixture.debugElement.query(By.css('input'))).not.toBeNull();
     expect(getFormlyFieldElement(fixture.nativeElement).getAttribute('class')).toEqual('foo');
+    expect(getFormlyFieldElement(fixture.nativeElement).getAttribute('style')).toEqual('');
   });
 
   describe('modelChange output', () => {