refactor(material/form-field): allow AbstractControlDirective as MatFormFieldControl.ngControl (#18206)

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

@@ -27,7 +27,7 @@ import {
   ViewChild,
   ViewEncapsulation,
 } from '@angular/core';
-import {NgControl} from '@angular/forms';
+import {AbstractControlDirective} from '@angular/forms';
 import {ThemePalette} from '@angular/material-experimental/mdc-core';
 import {
   getMatFormFieldDuplicatedHintError,
@@ -628,10 +628,13 @@ export class MatFormField
     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';
 
 /** An interface which allows a control to work inside of a `MatFormField`. */
@@ -28,8 +28,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

@@ -45,7 +45,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';
 
 let nextUniqueId = 0;
@@ -393,10 +393,13 @@ export class MatFormField
     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.md

@@ -5,6 +5,7 @@
 ```ts
 
 import { _AbstractConstructor } from '@angular/material/core';
+import { AbstractControlDirective } from '@angular/forms';
 import { AfterContentChecked } from '@angular/core';
 import { AfterContentInit } from '@angular/core';
 import { AfterViewInit } from '@angular/core';
@@ -132,7 +133,7 @@ export class MatFormField extends _MatFormFieldBase implements AfterContentInit,
     // (undocumented)
     _prefixChildren: QueryList<MatPrefix>;
     _shouldAlwaysFloat(): boolean;
-    _shouldForward(prop: keyof NgControl): boolean;
+    _shouldForward(prop: keyof AbstractControlDirective): boolean;
     // (undocumented)
     _shouldLabelFloat(): boolean;
     _subscriptAnimationState: string;
@@ -163,7 +164,7 @@ export abstract class MatFormFieldControl<T> {
     readonly errorState: boolean;
     readonly focused: boolean;
     readonly id: string;
-    readonly ngControl: NgControl | null;
+    readonly ngControl: NgControl | AbstractControlDirective | null;
     abstract onContainerClick(event: MouseEvent): void;
     readonly placeholder: string;
     readonly required: boolean;