Skip to content

docs(stepper): error state example not set up correctly #19416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 12, 2020
Merged

docs(stepper): error state example not set up correctly #19416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components-examples/material/stepper/stepper-errors/stepper-errors-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<mat-horizontal-stepper linear #stepper>
<mat-horizontal-stepper #stepper>
<mat-step [stepControl]="firstFormGroup" errorMessage="Name is required.">
<form [formGroup]="firstFormGroup">
<ng-template matStepLabel>Fill out your name</ng-template>
Expand All @@ -7,6 +7,7 @@
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
</mat-form-field>
<div>
<p>Go to a different step to see the error state</p>
<button mat-button matStepperNext>Next</button>
</div>
</form>
Expand All @@ -20,6 +21,7 @@
required>
</mat-form-field>
<div>
<p>Go to a different step to see the error state</p>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/material/stepper/stepper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,8 +215,11 @@ the global default stepper options which can be specified by providing a value f

### Error State

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

```ts
@NgModule({
Expand Down