fix(form-field): label gap not being calculated when switching to outline dynamically (#11658)

Fixes the form field gap not being calculated if the field switches to the `outline` appearance after init.

Fixes #11653.

Author: crisbeto

src/lib/form-field/form-field.ts

@@ -148,6 +148,11 @@ export class MatFormField extends _MatFormFieldMixinBase
     return this._appearance || this._defaultOptions && this._defaultOptions.appearance || 'legacy';
   }
   set appearance(value: MatFormFieldAppearance) {
+    // If we're switching to `outline` from another appearance, we have to recalculate the gap.
+    if (value !== this._appearance && value === 'outline') {
+      this._initialGapCalculated = false;
+    }
+
     this._appearance = value;
   }
   _appearance: MatFormFieldAppearance;

src/lib/input/input.spec.ts

@@ -1127,6 +1127,30 @@ describe('MatInput with appearance', () => {
       expect(testComponent.formField.floatLabel).toBe('auto');
     }
   }));
+
+  it('should recalculate gaps when switching to outline appearance after init', fakeAsync(() => {
+    fixture.destroy();
+    TestBed.resetTestingModule();
+
+    const outlineFixture = createComponent(MatInputWithAppearanceAndLabel);
+
+    outlineFixture.detectChanges();
+    outlineFixture.componentInstance.appearance = 'legacy';
+    outlineFixture.detectChanges();
+    flush();
+
+    outlineFixture.componentInstance.appearance = 'outline';
+    outlineFixture.detectChanges();
+    flush();
+    outlineFixture.detectChanges();
+
+    const wrapperElement = outlineFixture.nativeElement;
+    const outlineStart = wrapperElement.querySelector('.mat-form-field-outline-start');
+    const outlineGap = wrapperElement.querySelector('.mat-form-field-outline-gap');
+
+    expect(parseInt(outlineStart.style.width)).toBeGreaterThan(0);
+    expect(parseInt(outlineGap.style.width)).toBeGreaterThan(0);
+  }));
 });
 
 describe('MatFormField default options', () => {
@@ -1567,6 +1591,18 @@ class MatInputWithAppearance {
   appearance: MatFormFieldAppearance;
 }
 
+@Component({
+  template: `
+    <mat-form-field [appearance]="appearance">
+      <mat-label>Label</mat-label>
+      <input matInput>
+    </mat-form-field>
+  `
+})
+class MatInputWithAppearanceAndLabel {
+  appearance: MatFormFieldAppearance;
+}
+
 @Component({
   template: `
     <mat-form-field>