fix(form-field): update label gap for outline style

Author: josephperrott

src/lib/form-field/BUILD.bazel

@@ -18,6 +18,7 @@ ng_module(
   deps = [
     "//src/lib/core",
     "//src/cdk/coercion",
+    "//src/cdk/observers",
     "//src/cdk/platform",
   ],
   tsconfig = "//src/lib:tsconfig-build.json",

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

@@ -8,6 +8,7 @@
 
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
+import {ObserversModule} from '@angular/cdk/observers';
 import {MatError} from './error';
 import {MatFormField} from './form-field';
 import {MatHint} from './hint';
@@ -27,7 +28,10 @@ import {MatSuffix} from './suffix';
     MatPrefix,
     MatSuffix,
   ],
-  imports: [CommonModule],
+  imports: [
+    CommonModule,
+    ObserversModule,
+  ],
   exports: [
     MatError,
     MatFormField,

src/lib/form-field/form-field.html

@@ -27,6 +27,7 @@
         <!-- We add aria-owns as a workaround for an issue in JAWS & NVDA where the label isn't
              read if it comes before the control in the DOM. -->
         <label class="mat-form-field-label"
+               (cdkObserveContent)="updateOutlineGap()"
                [id]="_labelId"
                [attr.for]="_control.id"
                [attr.aria-owns]="_control.id"

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

@@ -481,7 +481,12 @@ export class MatFormField extends _MatFormFieldMixinBase
       this._outlineGapWidth = 0;
     }
     this._initialGapCalculated = true;
-    this._changeDetectorRef.markForCheck();
+    // @breaking-change 7.0.0 Remove this check and else block once _ngZone is required.
+    if (this._ngZone) {
+      this._ngZone.run(() => this._changeDetectorRef.markForCheck());
+    } else {
+      this._changeDetectorRef.markForCheck();
+    }
   }
 
   /** Gets the start end of the rect considering the current directionality. */