Use FormControl and only one of incompatible form options

Author: willshowell

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormControl, Validators, NgControl} from '@angular/forms';
+import {FormControl, Validators} from '@angular/forms';
 
 
 let max = 5;
@@ -45,7 +45,7 @@ export class InputDemo {
     }
   }
 
-  customErrorStateMatcher(c: NgControl): boolean {
+  customErrorStateMatcher(c: FormControl): boolean {
     const hasInteraction = c.dirty || c.touched;
     const isInvalid = c.invalid;
 

src/lib/core/error/error-options.ts

@@ -7,36 +7,31 @@
  */
 
 import {InjectionToken} from '@angular/core';
-import {NgControl, FormGroupDirective, NgForm} from '@angular/forms';
+import {FormControl, FormGroupDirective, Form, NgForm} from '@angular/forms';
 
 /** Injection token that can be used to specify the global error options. */
 export const MD_ERROR_GLOBAL_OPTIONS = new InjectionToken<ErrorOptions>('md-error-global-options');
 
 export type ErrorStateMatcher =
-  (control: NgControl, parentFormGroup: FormGroupDirective, parentForm: NgForm) => boolean;
+    (control: FormControl, form: FormGroupDirective | NgForm) => boolean;
 
 export interface ErrorOptions {
   errorStateMatcher?: ErrorStateMatcher;
 }
 
-export function defaultErrorStateMatcher(control: NgControl, formGroup: FormGroupDirective,
-    form: NgForm): boolean {
-
-  const isInvalid = control && control.invalid;
-  const isTouched = control && control.touched;
-  const isSubmitted = (formGroup && formGroup.submitted) ||
-      (form && form.submitted);
+export function defaultErrorStateMatcher(control: FormControl, form: FormGroupDirective | NgForm) {
+  const isInvalid = control.invalid;
+  const isTouched = control.touched;
+  const isSubmitted = form && form.submitted;
 
   return !!(isInvalid && (isTouched || isSubmitted));
 }
 
-export function showOnDirtyErrorStateMatcher(control: NgControl, formGroup: FormGroupDirective,
-    form: NgForm): boolean {
-
-  const isInvalid = control && control.invalid;
-  const isDirty = control && control.dirty;
-  const isSubmitted = (formGroup && formGroup.submitted) ||
-      (form && form.submitted);
+export function showOnDirtyErrorStateMatcher(control: FormControl,
+    form: FormGroupDirective | NgForm) {
+  const isInvalid = control.invalid;
+  const isDirty = control.dirty;
+  const isSubmitted = form && form.submitted;
 
   return !!(isInvalid && (isDirty || isSubmitted));
 }

src/lib/input/input-container.spec.ts

@@ -6,7 +6,6 @@ import {
   FormGroupDirective,
   FormsModule,
   NgForm,
-  NgControl,
   ReactiveFormsModule,
   Validators
 } from '@angular/forms';
@@ -760,10 +759,12 @@ describe('MdInputContainer', function () {
       let component = fixture.componentInstance;
       let containerEl = fixture.debugElement.query(By.css('md-input-container')).nativeElement;
 
-      expect(component.formControl.invalid).toBe(true, 'Expected form control to be invalid');
+      const control = component.formGroup.get('name')!;
+
+      expect(control.invalid).toBe(true, 'Expected form control to be invalid');
       expect(containerEl.querySelectorAll('md-error').length).toBe(0, 'Expected no error messages');
 
-      component.formControl.markAsTouched();
+      control.markAsTouched();
       fixture.detectChanges();
 
       fixture.whenStable().then(() => {
@@ -1136,10 +1137,10 @@ class MdInputContainerWithFormErrorMessages {
 
 @Component({
   template: `
-    <form #form="ngForm" novalidate>
+    <form [formGroup]="formGroup">
       <md-input-container>
         <input mdInput
-            [formControl]="formControl"
+            formControlName="name"
             [errorStateMatcher]="customErrorStateMatcher.bind(this)">
         <md-hint>Please type something</md-hint>
         <md-error>This field is required</md-error>
@@ -1148,8 +1149,10 @@ class MdInputContainerWithFormErrorMessages {
   `
 })
 class MdInputContainerWithCustomErrorStateMatcher {
-  @ViewChild('form') form: NgForm;
-  formControl = new FormControl('', Validators.required);
+  formGroup = new FormGroup({
+    name: new FormControl('', Validators.required)
+  });
+
   errorState = false;
 
   customErrorStateMatcher(): boolean {

src/lib/input/input-container.ts

@@ -29,7 +29,7 @@ import {
 } from '@angular/core';
 import {animate, state, style, transition, trigger} from '@angular/animations';
 import {coerceBooleanProperty, Platform} from '../core';
-import {FormGroupDirective, NgControl, NgForm} from '@angular/forms';
+import {FormGroupDirective, NgControl, NgForm, FormControl} from '@angular/forms';
 import {getSupportedInputTypes} from '../core/platform/features';
 import {
   getMdInputContainerDuplicatedHintError,
@@ -264,7 +264,8 @@ export class MdInputDirective {
   /** Whether the input is in an error state. */
   _isErrorState(): boolean {
     const control = this._ngControl;
-    return this.errorStateMatcher(control, this._parentFormGroup, this._parentForm);
+    const form = this._parentFormGroup || this._parentForm;
+    return control && this.errorStateMatcher(control.control as FormControl, form);
   }
 
   /** Make sure the input is a supported type. */

src/lib/input/input.md

@@ -125,8 +125,14 @@ the error messages.
 ```
 
 ```ts
-function myErrorStateMatcher(control: NgControl, parentFg: FormGroupDirective, parentForm: NgForm): boolean {
-  return !!(control.invalid && control.dirty);
+function myErrorStateMatcher(control: FormControl, form: FormGroupDirective | NgForm): boolean {
+  // Error when invalid control is dirty, touched, or submitted
+  const isInvalid = control.invalid;
+  const isDirty = control.dirty;
+  const isTouched = control.touched;
+  const isSubmitted = form && form.submitted;
+
+  return !!(isInvalid && (isDirty || isTouched || isSubmitted)));
 }
 ```