mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
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:
committed by
mmalerba
parent
b584888909
commit
7fac91554e
@@ -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);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user