From 39e33df78cbd26c894caba82970e563cd27fb056 Mon Sep 17 00:00:00 2001 From: Kara Erickson Date: Thu, 5 Oct 2017 08:55:01 -0700 Subject: [PATCH] chore: change ErrorStateMatcher to use FormControl again --- src/demo-app/input/input-demo.ts | 4 ++-- src/lib/core/error/error-options.ts | 6 +++--- src/lib/input/input.md | 2 +- src/lib/input/input.ts | 5 +++-- src/lib/select/select.ts | 11 +++++++++-- src/lib/stepper/stepper.ts | 4 ++-- 6 files changed, 20 insertions(+), 12 deletions(-) diff --git a/src/demo-app/input/input-demo.ts b/src/demo-app/input/input-demo.ts index 2f28f2b6f922..d107aaf996cc 100644 --- a/src/demo-app/input/input-demo.ts +++ b/src/demo-app/input/input-demo.ts @@ -1,5 +1,5 @@ import {Component, ChangeDetectionStrategy} from '@angular/core'; -import {FormControl, NgControl, Validators} from '@angular/forms'; +import {FormControl, Validators} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material'; @@ -54,7 +54,7 @@ export class InputDemo { } customErrorStateMatcher: ErrorStateMatcher = { - isErrorState: (control: NgControl | null) => { + isErrorState: (control: FormControl | null) => { if (control) { const hasInteraction = control.dirty || control.touched; const isInvalid = control.invalid; diff --git a/src/lib/core/error/error-options.ts b/src/lib/core/error/error-options.ts index 261906995c22..503f0ba10e1c 100644 --- a/src/lib/core/error/error-options.ts +++ b/src/lib/core/error/error-options.ts @@ -7,12 +7,12 @@ */ import {Injectable} from '@angular/core'; -import {FormGroupDirective, NgForm, NgControl} from '@angular/forms'; +import {FormGroupDirective, NgForm, FormControl} from '@angular/forms'; /** Error state matcher that matches when a control is invalid and dirty. */ @Injectable() export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher { - isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean { + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { return !!(control && control.invalid && (control.dirty || (form && form.submitted))); } } @@ -20,7 +20,7 @@ export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher { /** Provider that defines how form controls behave with regards to displaying error messages. */ @Injectable() export class ErrorStateMatcher { - isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean { + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { return !!(control && control.invalid && (control.touched || (form && form.submitted))); } } diff --git a/src/lib/input/input.md b/src/lib/input/input.md index c86da66c654f..99a95c914044 100644 --- a/src/lib/input/input.md +++ b/src/lib/input/input.md @@ -127,7 +127,7 @@ returns a boolean. A result of `true` will display the error messages. ```ts class MyErrorStateMatcher implements ErrorStateMatcher { - isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean { + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { // Error when invalid control is dirty, touched, or submitted const isSubmitted = form && form.submitted; return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted))); diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts index 45b2e40d644e..dea8e13816ea 100644 --- a/src/lib/input/input.ts +++ b/src/lib/input/input.ts @@ -18,7 +18,7 @@ import { Self, } from '@angular/core'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; -import {FormGroupDirective, NgControl, NgForm} from '@angular/forms'; +import {FormGroupDirective, NgControl, NgForm, FormControl} from '@angular/forms'; import {Platform, getSupportedInputTypes} from '@angular/cdk/platform'; import {getMatInputUnsupportedTypeError} from './input-errors'; import {ErrorStateMatcher} from '@angular/material/core'; @@ -225,7 +225,8 @@ export class MatInput implements MatFormFieldControl, OnChanges, OnDestroy, const oldState = this.errorState; const parent = this._parentFormGroup || this._parentForm; const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher; - const newState = matcher.isErrorState(this.ngControl, parent); + const control = this.ngControl ? this.ngControl.control as FormControl : null; + const newState = matcher.isErrorState(control, parent); if (newState !== oldState) { this.errorState = newState; diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts index 8172be8eff09..2aff32be3180 100644 --- a/src/lib/select/select.ts +++ b/src/lib/select/select.ts @@ -45,7 +45,13 @@ import { ViewChild, ViewEncapsulation, } from '@angular/core'; -import {ControlValueAccessor, FormGroupDirective, NgControl, NgForm} from '@angular/forms'; +import { + ControlValueAccessor, + FormGroupDirective, + NgControl, + NgForm, + FormControl +} from '@angular/forms'; import { CanDisable, HasTabIndex, @@ -687,8 +693,9 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, get errorState(): boolean { const parent = this._parentFormGroup || this._parentForm; const matcher = this.errorStateMatcher || this._defaultErrorStateMatcher; + const control = this.ngControl ? this.ngControl.control as FormControl : null; - return matcher.isErrorState(this.ngControl, parent); + return matcher.isErrorState(control, parent); } private _initializeSelection(): void { diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 28a5d356dd82..4d9f4325ee1d 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -22,7 +22,7 @@ import { ViewEncapsulation, ChangeDetectionStrategy, } from '@angular/core'; -import {NgControl, FormGroupDirective, NgForm} from '@angular/forms'; +import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; import {MatStepHeader} from './step-header'; import {MatStepLabel} from './step-label'; @@ -51,7 +51,7 @@ export class MatStep extends _MatStep implements ErrorStateMatcher { } /** Custom error state matcher that additionally checks for validity of interacted form. */ - isErrorState(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean { + isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const originalErrorState = this._errorStateMatcher.isErrorState(control, form); // Custom error state checks for the validity of form that is not submitted or touched