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,17 +43,17 @@ <h2>Linear Vertical Stepper Demo</h2>
42
43
</ md-vertical-stepper >
43
44
</ form >
44
45
45
- < h2 > Linear Vertical Stepper Demo</ h2 >
46
- < md-vertical -stepper >
47
- < md-step [valid ] ="nameFormGroup.valid ">
46
+ < h3 > Linear Horizontal Stepper Demo using multiple FormGroups </ h3 >
47
+ < md-horizontal -stepper [linear] =" !isNonLinear " >
48
+ < md-step [stepControl ] ="nameFormGroup ">
48
49
< form [formGroup] ="nameFormGroup ">
49
50
< ng-template mdStepLabel > Fill out your name</ ng-template >
50
51
< md-input-container >
51
- < input mdInput placeholder ="First Name " formControlName ="firstNameFormCtrl " required >
52
+ < input mdInput placeholder ="First Name " formControlName ="firstNameCtrl " required >
52
53
< md-error > This field is required</ md-error >
53
54
</ md-input-container >
54
55
< md-input-container >
55
- < input mdInput placeholder ="Last Name " formControlName ="lastNameFormCtrl " required >
56
+ < input mdInput placeholder ="Last Name " formControlName ="lastNameCtrl " required >
56
57
< md-error > This field is required</ md-error >
57
58
</ md-input-container >
58
59
< div >
@@ -61,13 +62,11 @@ <h2>Linear Vertical Stepper Demo</h2>
61
62
</ form >
62
63
</ md-step >
63
64
64
- < md-step [valid ] ="phoneFormGroup.valid ">
65
+ < md-step [stepControl ] ="phoneFormGroup ">
65
66
< form [formGroup] ="phoneFormGroup ">
66
- < ng-template mdStepLabel >
67
- < div > Fill out your phone number</ div >
68
- </ ng-template >
67
+ < ng-template mdStepLabel > Fill out your phone number</ ng-template >
69
68
< md-input-container >
70
- < input mdInput placeholder ="Phone number " formControlName ="phoneFormCtrl ">
69
+ < input mdInput placeholder ="Phone number " formControlName ="phoneCtrl ">
71
70
< md-error > This field is required</ md-error >
72
71
</ md-input-container >
73
72
< div >
@@ -86,9 +85,9 @@ <h2>Linear Vertical Stepper Demo</h2>
86
85
</ div >
87
86
</ form >
88
87
</ md-step >
89
- </ md-vertical -stepper >
88
+ </ md-horizontal -stepper >
90
89
91
- < h2 > Vertical Stepper Demo</ h2 >
90
+ < h3 > Vertical Stepper Demo</ h3 >
92
91
< md-vertical-stepper >
93
92
< md-step >
94
93
< ng-template mdStepLabel > Fill out your name</ ng-template >
@@ -143,7 +142,7 @@ <h2>Vertical Stepper Demo</h2>
143
142
</ md-step >
144
143
</ md-vertical-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