Skip to content

Commit

Permalink
refactor: rename match to isErrorState
Browse files Browse the repository at this point in the history
  • Loading branch information
crisbeto committed Aug 5, 2017
1 parent 55fb514 commit 9200c6f
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 24 deletions.
4 changes: 2 additions & 2 deletions src/lib/core/error/error-options.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,15 @@ import {FormGroupDirective, NgForm, NgControl} from '@angular/forms';
/** Error state matcher that matches when a control is invalid and dirty. */
@Injectable()
export class ShowOnDirtyErrorStateMatcher implements ErrorStateMatcher {
match(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
isErrorSate(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
return control ? !!(control.invalid && (control.dirty || (form && form.submitted))) : false;
}
}

/** Provider that defines how form controls behave with regards to displaying error messages. */
@Injectable()
export class ErrorStateMatcher {
match(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
isErrorSate(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
return control ? !!(control.invalid && (control.touched || (form && form.submitted))) : false;
}
}
6 changes: 4 additions & 2 deletions src/lib/input/input-container.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -895,7 +895,9 @@ describe('MdInputContainer with forms', () => {
declarations: [
MdInputContainerWithFormErrorMessages
],
providers: [{ provide: ErrorStateMatcher, useValue: { match: globalErrorStateMatcher } }]
providers: [
{ provide: ErrorStateMatcher, useValue: { isErrorSate: globalErrorStateMatcher } }
]
});

let fixture = TestBed.createComponent(MdInputContainerWithFormErrorMessages);
Expand Down Expand Up @@ -1252,7 +1254,7 @@ class MdInputContainerWithCustomErrorStateMatcher {

errorState = false;
customErrorStateMatcher: ErrorStateMatcher = {
match: () => this.errorState
isErrorSate: () => this.errorState
};
}

Expand Down
6 changes: 3 additions & 3 deletions src/lib/input/input-container.ts
Original file line number Diff line number Diff line change
Expand Up @@ -299,9 +299,9 @@ export class MdInputDirective implements OnChanges, OnDestroy, DoCheck {

/** Re-evaluates the error state. This is only relevant with @angular/forms. */
private _updateErrorState() {
const oldState = this._isErrorState;
const matcher = this.errorStateMatcher || this._globalErrorStateMatcher;
const newState = matcher.match(this._ngControl, this._parentFormGroup || this._parentForm);
let oldState = this._isErrorState;
let matcher = this.errorStateMatcher || this._globalErrorStateMatcher;
let newState = matcher.isErrorSate(this._ngControl, this._parentFormGroup || this._parentForm);

if (newState !== oldState) {
this._isErrorState = newState;
Expand Down
23 changes: 12 additions & 11 deletions src/lib/input/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,8 @@ A placeholder for the input can be specified in one of two ways: either using th
attribute on the `input` or `textarea`, or using an `md-placeholder` element in the
`md-input-container`. Using both will raise an error.

Global default placeholder options can be specified by setting the `MD_PLACEHOLDER_GLOBAL_OPTIONS` provider. This setting will apply to all components that support the floating placeholder.
Global default placeholder options can be specified by setting the `MD_PLACEHOLDER_GLOBAL_OPTIONS`
provider. This setting will apply to all components that support the floating placeholder.

```ts
@NgModule({
Expand Down Expand Up @@ -110,12 +111,12 @@ warn color.

### Custom Error Matcher

By default, error messages are shown when the control is invalid and either the user has interacted with
(touched) the element or the parent form has been submitted. If you wish to override this
By default, error messages are shown when the control is invalid and either the user has interacted
with (touched) the element or the parent form has been submitted. If you wish to override this
behavior (e.g. to show the error as soon as the invalid control is dirty or when a parent form group
is invalid), you can use the `errorStateMatcher` property of the `mdInput`. To use this property,
create a function in your component class that returns a boolean. A result of `true` will display
the error messages.
create an `ErrorStateMatcher` object in your component class that has a `isErrorSate` function which
returns a boolean. A result of `true` will display the error messages.

```html
<md-input-container>
Expand All @@ -126,22 +127,22 @@ the error messages.

```ts
class MyErrorStateMatcher implements ErrorStateMatcher {
match(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
isErrorSate(control: NgControl | null, form: FormGroupDirective | NgForm | null): boolean {
// Error when invalid control is dirty, touched, or submitted
const isSubmitted = form && form.submitted;
return !!(control.invalid && (control.dirty || control.touched || isSubmitted)));
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted)));
}
}
```

A global error state matcher can be specified by setting the `ErrorOptions` provider. This applies
to all inputs. For convenience, `ShowOnDirtyErrorStateMatcher` is available in order to globally
cause input errors to show when the input is dirty and invalid.
A global error state matcher can be specified by setting the `ErrorStateMatcher` provider. This
applies to all inputs. For convenience, `ShowOnDirtyErrorStateMatcher` is available in order to
globally cause input errors to show when the input is dirty and invalid.

```ts
@NgModule({
providers: [
{provide: ErrorOptions, useClass: ShowOnDirtyErrorStateMatcher}
{provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
]
})
```
Expand Down
10 changes: 5 additions & 5 deletions src/lib/select/select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2689,24 +2689,24 @@ describe('MdSelect', () => {
expect(component.control.invalid).toBe(false);
expect(component.select._isErrorState()).toBe(false);

customErrorFixture.componentInstance.errorStateMatcher = { match: matcher };
customErrorFixture.componentInstance.errorStateMatcher = { isErrorSate: matcher };
customErrorFixture.detectChanges();

expect(component.select._isErrorState()).toBe(true);
expect(matcher).toHaveBeenCalled();
});

it('should be able to override the error matching behavior via the injection token', () => {
const errorOptions: ErrorStateMatcher = {
match: jasmine.createSpy('error state matcher').and.returnValue(true)
const errorStateMatcher: ErrorStateMatcher = {
isErrorSate: jasmine.createSpy('error state matcher').and.returnValue(true)
};

fixture.destroy();

TestBed.resetTestingModule().configureTestingModule({
imports: [MdSelectModule, ReactiveFormsModule, FormsModule, NoopAnimationsModule],
declarations: [SelectInsideFormGroup],
providers: [{ provide: ErrorStateMatcher, useValue: errorOptions }],
providers: [{ provide: ErrorStateMatcher, useValue: errorStateMatcher }],
});

const errorFixture = TestBed.createComponent(SelectInsideFormGroup);
Expand All @@ -2715,7 +2715,7 @@ describe('MdSelect', () => {
errorFixture.detectChanges();

expect(component.select._isErrorState()).toBe(true);
expect(errorOptions.match).toHaveBeenCalled();
expect(errorStateMatcher.isErrorSate).toHaveBeenCalled();
});
});

Expand Down
2 changes: 1 addition & 1 deletion src/lib/select/select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -639,7 +639,7 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
/** Whether the select is in an error state. */
_isErrorState(): boolean {
const matcher = this.errorStateMatcher || this._globalErrorStateMatcher;
return matcher.match(this._control, this._parentFormGroup || this._parentForm);
return matcher.isErrorSate(this._control, this._parentFormGroup || this._parentForm);
}

/**
Expand Down

0 comments on commit 9200c6f

Please sign in to comment.