Skip to content

Commit 277aeb0

Browse files
authored
docs(stepper): error state example not set up correctly (#19416)
The `stepper-errors` example was set up using a linear stepper which doesn't allow users to move to a different step if the current one is invalid which means that the user doesn't have a way of seeing the error state. These changes make the stepper non-linear, expand the example description to explain how the error state works, and add some text so users know what to do in order to see the error state. Fixes #19407.
1 parent b1e2a6d commit 277aeb0

File tree

2 files changed

+8
-3
lines changed

2 files changed

+8
-3
lines changed

src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<mat-horizontal-stepper linear #stepper>
1+
<mat-horizontal-stepper #stepper>
22
<mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
33
<form [formGroup]="firstFormGroup">
44
<ng-template matStepLabel>Fill out your name</ng-template>
@@ -7,6 +7,7 @@
77
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
88
</mat-form-field>
99
<div>
10+
<p>Go to a different step to see the error state</p>
1011
<button mat-button matStepperNext>Next</button>
1112
</div>
1213
</form>
@@ -20,6 +21,7 @@
2021
required>
2122
</mat-form-field>
2223
<div>
24+
<p>Go to a different step to see the error state</p>
2325
<button mat-button matStepperPrevious>Back</button>
2426
<button mat-button matStepperNext>Next</button>
2527
</div>

src/material/stepper/stepper.md

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,8 +215,11 @@ the global default stepper options which can be specified by providing a value f
215215

216216
### Error State
217217

218-
The stepper can now show error states by simply providing the `showError` option to the
219-
`STEPPER_GLOBAL_OPTIONS` in your application's root module as mentioned above.
218+
If you want to show an error when the user moved past a step that hasn't been filled out correctly,
219+
you can set the error message through the `errorMessage` input and configure the stepper to show
220+
errors via the `showError` option in the `STEPPER_GLOBAL_OPTIONS` injection token. Note that since
221+
`linear` steppers prevent a user from advancing past an invalid step to begin with, this setting
222+
will not affect steppers marked as `linear`.
220223

221224
```ts
222225
@NgModule({

0 commit comments

Comments
 (0)