fix(stepper): ignoring custom falsy value for hasError (#14337)

The `hasError` input allows people to override the error state of a step, however we currently ignore falsy values because of an incorrect ||.
These changes also fix one of the test fixtures where an error was being swallowed silently.

Fixes #14333.
This commit is contained in:
Kristiyan Kostadinov
2018-12-04 00:33:05 +01:00
committed by mmalerba
parent b584888909
commit 7fac91554e
2 changed files with 21 additions and 3 deletions
+1 -1
View File
@@ -181,7 +181,7 @@ export class CdkStep implements OnChanges {
/** Whether step has an error. */
@Input()
get hasError(): boolean {
return this._customError || this._getDefaultError();
return this._customError == null ? this._getDefaultError() : this._customError;
}
set hasError(value: boolean) {
this._customError = coerceBooleanProperty(value);
+20 -2
View File
@@ -929,7 +929,7 @@ describe('MatStepper', () => {
});
it('should show error state', () => {
let nextButtonNativeEl = fixture.debugElement
const nextButtonNativeEl = fixture.debugElement
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
stepper.selectedIndex = 1;
@@ -939,6 +939,23 @@ describe('MatStepper', () => {
expect(stepper._getIndicatorType(0)).toBe(STEP_STATE.ERROR);
});
it('should respect a custom falsy hasError value', () => {
const nextButtonNativeEl = fixture.debugElement
.queryAll(By.directive(MatStepperNext))[0].nativeElement;
stepper.selectedIndex = 1;
nextButtonNativeEl.click();
fixture.detectChanges();
expect(stepper._getIndicatorType(0)).toBe(STEP_STATE.ERROR);
stepper._steps.first.hasError = false;
fixture.detectChanges();
expect(stepper._getIndicatorType(0)).not.toBe(STEP_STATE.ERROR);
});
});
describe('stepper using Material UI Guideline logic', () => {
@@ -1138,7 +1155,8 @@ function createComponent<T>(component: Type<T>,
template: `
<form [formGroup]="formGroup">
<mat-horizontal-stepper>
<mat-step errorMessage="This field is required" [stepControl]="formArray?.get([0])">
<mat-step errorMessage="This field is required"
[stepControl]="formGroup.get('firstNameCtrl')">
<ng-template matStepLabel>Step 1</ng-template>
<mat-form-field>
<mat-label>First name</mat-label>