refactor(form-field): allow AbstractControlDirective as MatFormFieldControl.ngControl

Allows for an `AbstractControlDirective` to be passed in as the `MatFormFieldControl.ngControl`. The advantage of passing in the abstract control directive is that it allows both form controls and form groups. This is necessary for the date range picker.

Author: crisbeto

src/material-experimental/mdc-form-field/form-field.ts

@@ -28,7 +28,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {AbstractControlDirective} from '@angular/forms';
 import {LabelOptions, MAT_LABEL_GLOBAL_OPTIONS, ThemePalette} from '@angular/material/core';
 import {
   getMatFormFieldDuplicatedHintError,
@@ -515,10 +515,13 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
     return this._control.shouldLabelFloat || this._shouldAlwaysFloat();
   }
 
-  /** Determines whether a class from the NgControl should be forwarded to the host element. */
-  _shouldForward(prop: keyof NgControl): boolean {
-    const ngControl = this._control ? this._control.ngControl : null;
-    return ngControl && ngControl[prop];
+  /**
+   * Determines whether a class from the AbstractControlDirective
+   * should be forwarded to the host element.
+   */
+  _shouldForward(prop: keyof AbstractControlDirective): boolean {
+    const control = this._control ? this._control.ngControl : null;
+    return control && control[prop];
   }
 
   /** Determines whether to display hints or errors. */

src/material/form-field/form-field-control.ts

@@ -7,7 +7,7 @@
  */
 
 import {Observable} from 'rxjs';
-import {NgControl} from '@angular/forms';
+import {AbstractControlDirective, NgControl} from '@angular/forms';
 import {Directive} from '@angular/core';
 
 
@@ -29,8 +29,8 @@ export abstract class MatFormFieldControl<T> {
   /** The placeholder for this control. */
   readonly placeholder: string;
 
-  /** Gets the NgControl for this control. */
-  readonly ngControl: NgControl | null;
+  /** Gets the AbstractControlDirective for this control. */
+  readonly ngControl: NgControl | AbstractControlDirective | null;
 
   /** Whether the control is focused. */
   readonly focused: boolean;

src/material/form-field/form-field.ts

@@ -50,7 +50,7 @@ import {MatPlaceholder} from './placeholder';
 import {MAT_PREFIX, MatPrefix} from './prefix';
 import {MAT_SUFFIX, MatSuffix} from './suffix';
 import {Platform} from '@angular/cdk/platform';
-import {NgControl} from '@angular/forms';
+import {AbstractControlDirective} from '@angular/forms';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
 
@@ -396,10 +396,13 @@ export class MatFormField extends _MatFormFieldMixinBase
     this._destroyed.complete();
   }
 
-  /** Determines whether a class from the NgControl should be forwarded to the host element. */
-  _shouldForward(prop: keyof NgControl): boolean {
-    const ngControl = this._control ? this._control.ngControl : null;
-    return ngControl && ngControl[prop];
+  /**
+   * Determines whether a class from the AbstractControlDirective
+   * should be forwarded to the host element.
+   */
+  _shouldForward(prop: keyof AbstractControlDirective): boolean {
+    const control = this._control ? this._control.ngControl : null;
+    return control && control[prop];
   }
 
   _hasPlaceholder() {

tools/public_api_guard/material/form-field.d.ts

@@ -63,7 +63,7 @@ export declare class MatFormField extends _MatFormFieldMixinBase implements Afte
     _hasLabel(): boolean;
     _hasPlaceholder(): boolean;
     _hideControlPlaceholder(): boolean;
-    _shouldForward(prop: keyof NgControl): boolean;
+    _shouldForward(prop: keyof AbstractControlDirective): boolean;
     _shouldLabelFloat(): boolean;
     protected _validateControlChild(): void;
     getConnectedOverlayOrigin(): ElementRef;
@@ -91,7 +91,7 @@ export declare abstract class MatFormFieldControl<T> {
     readonly errorState: boolean;
     readonly focused: boolean;
     readonly id: string;
-    readonly ngControl: NgControl | null;
+    readonly ngControl: NgControl | AbstractControlDirective | null;
     readonly placeholder: string;
     readonly required: boolean;
     readonly shouldLabelFloat: boolean;