fix(form-field): allow for measuring outline gap when label is not in dom

Author: josephperrott

src/demo-app/input/input-demo.html

@@ -1,3 +1,19 @@
+<mat-tab-group selectedIndex="0">
+	<mat-tab label="One">
+		<p>one</p>
+	</mat-tab>
+	<mat-tab label="Two">
+		<mat-form-field appearance="outline">
+			<mat-label>Label two</mat-label>
+			<input matInput [formControl]="two">
+		</mat-form-field>
+	</mat-tab>
+	<mat-tab label="three">
+		<p>three</p>
+	</mat-tab>
+</mat-tab-group>
+
+<!--
 <mat-card class="demo-card demo-basic">
   <mat-toolbar color="primary">Basic</mat-toolbar>
   <mat-card-content>
@@ -673,3 +689,4 @@ <h3>&lt;textarea&gt; with bindable autosize </h3>
     </mat-tab-group>
   </mat-card-content>
 </mat-card>
+ -->

src/demo-app/input/input-demo.ts

@@ -23,6 +23,11 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
   styleUrls: ['input-demo.css'],
 })
 export class InputDemo {
+
+
+  one = new FormControl('...');
+  two = new FormControl('...');
+  three = new FormControl('...');
   floatingLabel = 'auto';
   color: boolean;
   requiredField: boolean;

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

@@ -141,6 +141,7 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
 export class MatFormField extends _MatFormFieldMixinBase
     implements AfterContentInit, AfterContentChecked, AfterViewInit, CanColor {
   private _labelOptions: LabelOptions;
+  private _outlineGapCalculationNeeded = false;
 
   /** The form-field appearance style. */
   @Input()
@@ -300,6 +301,9 @@ export class MatFormField extends _MatFormFieldMixinBase
 
   ngAfterContentChecked() {
     this._validateControlChild();
+    if (this._outlineGapCalculationNeeded) {
+      this.updateOutlineGap();
+    }
   }
 
   ngAfterViewInit() {
@@ -448,6 +452,11 @@ export class MatFormField extends _MatFormFieldMixinBase
       return;
     }
 
+    if (!document.documentElement.contains(this._elementRef.nativeElement)) {
+      this._outlineGapCalculationNeeded = true;
+      return;
+    }
+
     let startWidth = 0;
     let gapWidth = 0;
     const startEls = this._connectionContainerRef.nativeElement.querySelectorAll<HTMLElement>(
@@ -459,9 +468,6 @@ export class MatFormField extends _MatFormFieldMixinBase
         // getBoundingClientRect isn't available on the server.
         return;
       }
-      if (!document.documentElement.contains(this._elementRef.nativeElement)) {
-        return;
-      }
 
       const containerStart = this._getStartEnd(
           this._connectionContainerRef.nativeElement.getBoundingClientRect());
@@ -481,6 +487,8 @@ export class MatFormField extends _MatFormFieldMixinBase
     for (let i = 0; i < gapEls.length; i++) {
       gapEls.item(i).style.width = `${gapWidth}px`;
     }
+
+    this._outlineGapCalculationNeeded = false;
   }
 
   /** Gets the start end of the rect considering the current directionality. */