1
- < h2 > Linear Vertical Stepper Demo</ h2 >
2
1
< md-checkbox [(ngModel)] ="isNonLinear "> Disable linear mode</ md-checkbox >
2
+
3
+ < h3 > Linear Vertical Stepper Demo using FormArray</ h3 >
3
4
< form [formGroup] ="formGroup ">
4
5
< md-vertical-stepper formArrayName ="formArray " [linear] ="!isNonLinear ">
5
6
< md-step formGroupName ="0 " [stepControl] ="formArray.get([0]) ">
@@ -42,8 +43,52 @@ <h2>Linear Vertical Stepper Demo</h2>
42
43
</ md-vertical-stepper >
43
44
</ form >
44
45
45
- < h2 > Vertical Stepper Demo</ h2 >
46
- < md-vertical-stepper >
46
+ < h3 > Linear Horizontal Stepper Demo using multiple FormGroups</ h3 >
47
+ < md-horizontal-stepper [linear] ="!isNonLinear ">
48
+ < md-step [stepControl] ="nameFormGroup ">
49
+ < form [formGroup] ="nameFormGroup ">
50
+ < ng-template mdStepLabel > Fill out your name</ ng-template >
51
+ < md-input-container >
52
+ < input mdInput placeholder ="First Name " formControlName ="firstNameCtrl " required >
53
+ < md-error > This field is required</ md-error >
54
+ </ md-input-container >
55
+ < md-input-container >
56
+ < input mdInput placeholder ="Last Name " formControlName ="lastNameCtrl " required >
57
+ < md-error > This field is required</ md-error >
58
+ </ md-input-container >
59
+ < div >
60
+ < button md-button mdStepperNext > Next</ button >
61
+ </ div >
62
+ </ form >
63
+ </ md-step >
64
+
65
+ < md-step [stepControl] ="phoneFormGroup ">
66
+ < form [formGroup] ="phoneFormGroup ">
67
+ < ng-template mdStepLabel > Fill out your phone number</ ng-template >
68
+ < md-input-container >
69
+ < input mdInput placeholder ="Phone number " formControlName ="phoneCtrl ">
70
+ < md-error > This field is required</ md-error >
71
+ </ md-input-container >
72
+ < div >
73
+ < button md-button mdStepperPrevious > Back</ button >
74
+ < button md-button mdStepperNext > Next</ button >
75
+ </ div >
76
+ </ form >
77
+ </ md-step >
78
+
79
+ < md-step >
80
+ < form >
81
+ < ng-template mdStepLabel > Confirm your information</ ng-template >
82
+ Everything seems correct.
83
+ < div >
84
+ < button md-button > Done</ button >
85
+ </ div >
86
+ </ form >
87
+ </ md-step >
88
+ </ md-horizontal-stepper >
89
+
90
+ < h3 > Vertical Stepper Demo</ h3 >
91
+ < md-horizontal-stepper >
47
92
< md-step >
48
93
< ng-template mdStepLabel > Fill out your name</ ng-template >
49
94
< md-input-container >
@@ -95,55 +140,9 @@ <h2>Vertical Stepper Demo</h2>
95
140
< button md-button > Done</ button >
96
141
</ div >
97
142
</ md-step >
98
- </ md-vertical-stepper >
99
-
100
- < h2 > Linear Vertical Stepper Demo</ h2 >
101
- < md-vertical-stepper >
102
- < md-step [valid] ="nameFormGroup.valid ">
103
- < form [formGroup] ="nameFormGroup ">
104
- < ng-template mdStepLabel > Fill out your name</ ng-template >
105
- < md-input-container >
106
- < input mdInput placeholder ="First Name " formControlName ="firstNameFormCtrl " required >
107
- < md-error > This field is required</ md-error >
108
- </ md-input-container >
109
- < md-input-container >
110
- < input mdInput placeholder ="Last Name " formControlName ="lastNameFormCtrl " required >
111
- < md-error > This field is required</ md-error >
112
- </ md-input-container >
113
- < div >
114
- < button md-button mdStepperNext > Next</ button >
115
- </ div >
116
- </ form >
117
- </ md-step >
118
-
119
- < md-step [valid] ="phoneFormGroup.valid ">
120
- < form [formGroup] ="phoneFormGroup ">
121
- < ng-template mdStepLabel >
122
- < div > Fill out your phone number</ div >
123
- </ ng-template >
124
- < md-input-container >
125
- < input mdInput placeholder ="Phone number " formControlName ="phoneFormCtrl ">
126
- < md-error > This field is required</ md-error >
127
- </ md-input-container >
128
- < div >
129
- < button md-button mdStepperPrevious > Back</ button >
130
- < button md-button mdStepperNext > Next</ button >
131
- </ div >
132
- </ form >
133
- </ md-step >
134
-
135
- < md-step >
136
- < form >
137
- < ng-template mdStepLabel > Confirm your information</ ng-template >
138
- Everything seems correct.
139
- < div >
140
- < button md-button > Done</ button >
141
- </ div >
142
- </ form >
143
- </ md-step >
144
- </ md-vertical-stepper >
143
+ </ md-horizontal-stepper >
145
144
146
- < h2 > Horizontal Stepper Demo</ h2 >
145
+ < h3 > Horizontal Stepper Demo</ h3 >
147
146
< md-horizontal-stepper >
148
147
< md-step >
149
148
< ng-template mdStepLabel > Fill out your name</ ng-template >
@@ -198,7 +197,7 @@ <h2>Horizontal Stepper Demo</h2>
198
197
</ md-step >
199
198
</ md-horizontal-stepper >
200
199
201
- < h2 > Horizontal Stepper Demo</ h2 >
200
+ < h3 > Horizontal Stepper Demo</ h3 >
202
201
< md-horizontal-stepper >
203
202
< md-step *ngFor ="let step of steps " [label] ="step.label ">
204
203
< md-input-container >
@@ -211,7 +210,7 @@ <h2>Horizontal Stepper Demo</h2>
211
210
</ md-step >
212
211
</ md-horizontal-stepper >
213
212
214
- < h2 > Horizontal Stepper Demo with Templated Label</ h2 >
213
+ < h3 > Horizontal Stepper Demo with Templated Label</ h3 >
215
214
< md-horizontal-stepper >
216
215
< md-step *ngFor ="let step of steps ">
217
216
< ng-template mdStepLabel > {{step.label}}</ ng-template >
0 commit comments