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

@@ -24,7 +24,7 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {NgControl, AbstractControlDirective} from '@angular/forms';
 import {
   LabelOptions,
   MAT_LABEL_GLOBAL_OPTIONS,
@@ -422,7 +422,7 @@ export class MatFormField implements AfterViewInit, OnDestroy, AfterContentCheck
   }
 
   /** Determines whether a class from the NgControl should be forwarded to the host element. */
-  _shouldForward(prop: keyof NgControl): boolean {
+  _shouldForward(prop: keyof AbstractControlDirective): boolean {
     const ngControl = this._control ? this._control.ngControl : null;
     return ngControl && ngControl[prop];
   }

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

@@ -7,7 +7,7 @@
  */
 
 import {Observable} from 'rxjs';
-import {NgControl} from '@angular/forms';
+import {NgControl, AbstractControlDirective} from '@angular/forms';
 import {Directive} from '@angular/core';
 
 
@@ -30,7 +30,7 @@ export abstract class MatFormFieldControl<T> {
   readonly placeholder: string;
 
   /** Gets the NgControl for this control. */
-  readonly ngControl: NgControl | null;
+  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 {MatPrefix} from './prefix';
 import {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';
 
 
@@ -383,7 +383,7 @@ export class MatFormField extends _MatFormFieldMixinBase
   }
 
   /** Determines whether a class from the NgControl should be forwarded to the host element. */
-  _shouldForward(prop: keyof NgControl): boolean {
+  _shouldForward(prop: keyof AbstractControlDirective): boolean {
     const ngControl = this._control ? this._control.ngControl : null;
     return ngControl && ngControl[prop];
   }

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

@@ -53,7 +53,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;
@@ -81,7 +81,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;