@@ -912,6 +912,27 @@ describe('MatStepper', () => {
912
912
} ) ;
913
913
} ) ;
914
914
915
+ describe ( 'linear stepper with form already filled and on to the last step' , ( ) => {
916
+ let fixture : ComponentFixture < LinearMatVerticalStepperAppForAlreadyFilledForm > ;
917
+ let stepper : MatStepper ;
918
+
919
+ beforeEach ( ( ) => {
920
+ fixture = createComponent ( LinearMatVerticalStepperAppForAlreadyFilledForm ) ;
921
+ fixture . detectChanges ( ) ;
922
+ stepper = fixture . debugElement . query ( By . directive ( MatStepper ) ) ! . componentInstance ;
923
+ } ) ;
924
+
925
+ it ( 'should navigate to previous steps' , ( ) => {
926
+ expect ( stepper . selectedIndex ) . toBe ( 2 ) ;
927
+
928
+ stepper . previous ( ) ;
929
+ expect ( stepper . selectedIndex ) . toBe ( 1 ) ;
930
+
931
+ stepper . previous ( ) ;
932
+ expect ( stepper . selectedIndex ) . toBe ( 0 ) ;
933
+ } ) ;
934
+ } ) ;
935
+
915
936
describe ( 'linear stepper with no `stepControl`' , ( ) => {
916
937
let noStepControlFixture : ComponentFixture < SimpleStepperWithoutStepControl > ;
917
938
beforeEach ( ( ) => {
@@ -1984,6 +2005,61 @@ class SimplePreselectedMatHorizontalStepperApp {
1984
2005
index = 0 ;
1985
2006
}
1986
2007
2008
+ @Component ( {
2009
+ template : `
2010
+ <mat-stepper linear [selectedIndex]="selectedIndex()">
2011
+ <mat-step [stepControl]="oneGroup">
2012
+ <form [formGroup]="oneGroup">
2013
+ <ng-template matStepLabel>Step one</ng-template>
2014
+ <input formControlName="oneCtrl" required>
2015
+ <div>
2016
+ <button matStepperPrevious>Back</button>
2017
+ <button matStepperNext>Next</button>
2018
+ </div>
2019
+ </form>
2020
+ </mat-step>
2021
+ <mat-step [stepControl]="twoGroup">
2022
+ <form [formGroup]="twoGroup">
2023
+ <ng-template matStepLabel>Step two</ng-template>
2024
+ <input formControlName="twoCtrl" required>
2025
+ <div>
2026
+ <button matStepperPrevious>Back</button>
2027
+ <button matStepperNext>Next</button>
2028
+ </div>
2029
+ </form>
2030
+ </mat-step>
2031
+ <mat-step [stepControl]="threeGroup" optional>
2032
+ <form [formGroup]="threeGroup">
2033
+ <ng-template matStepLabel>Step two</ng-template>
2034
+ <input formControlName="threeCtrl">
2035
+ <div>
2036
+ <button matStepperPrevious>Back</button>
2037
+ <button matStepperNext>Next</button>
2038
+ </div>
2039
+ </form>
2040
+ </mat-step>
2041
+ <mat-step>
2042
+ Done
2043
+ </mat-step>
2044
+ </mat-stepper>
2045
+ ` ,
2046
+ imports : [ ReactiveFormsModule , MatStepperModule ] ,
2047
+ standalone : false ,
2048
+ } )
2049
+ class LinearMatVerticalStepperAppForAlreadyFilledForm {
2050
+ selectedIndex = signal ( 2 ) ;
2051
+
2052
+ oneGroup = new FormGroup ( {
2053
+ oneCtrl : new FormControl ( 'test 1' , Validators . required ) ,
2054
+ } ) ;
2055
+ twoGroup = new FormGroup ( {
2056
+ twoCtrl : new FormControl ( 'test 2' , Validators . required ) ,
2057
+ } ) ;
2058
+ threeGroup = new FormGroup ( {
2059
+ threeCtrl : new FormControl ( 'test 3' , Validators . required ) ,
2060
+ } ) ;
2061
+ }
2062
+
1987
2063
@Component ( {
1988
2064
template : `
1989
2065
<mat-stepper linear>
0 commit comments