|
6 | 6 | FormGroupDirective, |
7 | 7 | FormsModule, |
8 | 8 | NgForm, |
| 9 | + NgControl, |
9 | 10 | ReactiveFormsModule, |
10 | 11 | Validators |
11 | 12 | } from '@angular/forms'; |
@@ -57,6 +58,7 @@ describe('MdInputContainer', function () { |
57 | 58 | MdInputContainerWithDynamicPlaceholder, |
58 | 59 | MdInputContainerWithFormControl, |
59 | 60 | MdInputContainerWithFormErrorMessages, |
| 61 | + MdInputContainerWithCustomErrorStateMatcher, |
60 | 62 | MdInputContainerWithFormGroupErrorMessages, |
61 | 63 | MdInputContainerWithId, |
62 | 64 | MdInputContainerWithPrefixAndSuffix, |
@@ -706,6 +708,36 @@ describe('MdInputContainer', function () { |
706 | 708 | }); |
707 | 709 | })); |
708 | 710 |
|
| 711 | + it('should display an error message when a custom error matcher returns true', async(() => { |
| 712 | + fixture.destroy(); |
| 713 | + |
| 714 | + let customFixture = TestBed.createComponent(MdInputContainerWithCustomErrorStateMatcher); |
| 715 | + let component: MdInputContainerWithCustomErrorStateMatcher; |
| 716 | + |
| 717 | + customFixture.detectChanges(); |
| 718 | + component = customFixture.componentInstance; |
| 719 | + containerEl = customFixture.debugElement.query(By.css('md-input-container')).nativeElement; |
| 720 | + |
| 721 | + expect(component.formControl.invalid).toBe(true, 'Expected form control to be invalid'); |
| 722 | + expect(containerEl.querySelectorAll('md-error').length).toBe(0, 'Expected no error messages'); |
| 723 | + |
| 724 | + component.formControl.markAsTouched(); |
| 725 | + customFixture.detectChanges(); |
| 726 | + |
| 727 | + customFixture.whenStable().then(() => { |
| 728 | + expect(containerEl.querySelectorAll('md-error').length) |
| 729 | + .toBe(0, 'Expected no error messages after being touched.'); |
| 730 | + |
| 731 | + component.errorState = true; |
| 732 | + customFixture.detectChanges(); |
| 733 | + |
| 734 | + customFixture.whenStable().then(() => { |
| 735 | + expect(containerEl.querySelectorAll('md-error').length) |
| 736 | + .toBe(1, 'Expected one error messages to have been rendered.'); |
| 737 | + }); |
| 738 | + }); |
| 739 | + })); |
| 740 | + |
709 | 741 | it('should hide the errors and show the hints once the input becomes valid', async(() => { |
710 | 742 | testComponent.formControl.markAsTouched(); |
711 | 743 | fixture.detectChanges(); |
@@ -1019,6 +1051,29 @@ class MdInputContainerWithFormErrorMessages { |
1019 | 1051 | renderError = true; |
1020 | 1052 | } |
1021 | 1053 |
|
| 1054 | +@Component({ |
| 1055 | + template: ` |
| 1056 | + <form #form="ngForm" novalidate> |
| 1057 | + <md-input-container> |
| 1058 | + <input mdInput |
| 1059 | + [formControl]="formControl" |
| 1060 | + [errorStateMatcher]="customErrorStateMatcher.bind(this)"> |
| 1061 | + <md-hint>Please type something</md-hint> |
| 1062 | + <md-error>This field is required</md-error> |
| 1063 | + </md-input-container> |
| 1064 | + </form> |
| 1065 | + ` |
| 1066 | +}) |
| 1067 | +class MdInputContainerWithCustomErrorStateMatcher { |
| 1068 | + @ViewChild('form') form: NgForm; |
| 1069 | + formControl = new FormControl('', Validators.required); |
| 1070 | + errorState = false; |
| 1071 | + |
| 1072 | + customErrorStateMatcher(c: NgControl): boolean { |
| 1073 | + return this.errorState; |
| 1074 | + } |
| 1075 | +} |
| 1076 | + |
1022 | 1077 | @Component({ |
1023 | 1078 | template: ` |
1024 | 1079 | <form [formGroup]="formGroup" novalidate> |
|
0 commit comments