1
1
< md-checkbox [(ngModel)] ="isNonLinear "> Disable linear mode</ md-checkbox >
2
2
3
- < h3 > Linear Vertical Stepper Demo using FormArray </ h3 >
3
+ < h3 > Linear Vertical Stepper Demo using a single form </ h3 >
4
4
< form [formGroup] ="formGroup ">
5
5
< md-vertical-stepper formArrayName ="formArray " [linear] ="!isNonLinear ">
6
6
< md-step formGroupName ="0 " [stepControl] ="formArray.get([0]) ">
@@ -43,19 +43,19 @@ <h3>Linear Vertical Stepper Demo using FormArray</h3>
43
43
</ md-vertical-stepper >
44
44
</ form >
45
45
46
- < h3 > Linear Horizontal Stepper Demo using multiple FormGroups </ h3 >
46
+ < h3 > Linear Horizontal Stepper Demo using a different form for each step </ h3 >
47
47
< md-horizontal-stepper [linear] ="!isNonLinear ">
48
48
< md-step [stepControl] ="nameFormGroup ">
49
49
< form [formGroup] ="nameFormGroup ">
50
50
< ng-template mdStepLabel > Fill out your name</ ng-template >
51
- < md-input-container >
51
+ < md-form-field >
52
52
< input mdInput placeholder ="First Name " formControlName ="firstNameCtrl " required >
53
53
< md-error > This field is required</ md-error >
54
- </ md-input-container >
55
- < md-input-container >
54
+ </ md-form-field >
55
+ < md-form-field >
56
56
< input mdInput placeholder ="Last Name " formControlName ="lastNameCtrl " required >
57
57
< md-error > This field is required</ md-error >
58
- </ md-input-container >
58
+ </ md-form-field >
59
59
< div >
60
60
< button md-button mdStepperNext > Next</ button >
61
61
</ div >
@@ -65,10 +65,10 @@ <h3>Linear Horizontal Stepper Demo using multiple FormGroups</h3>
65
65
< md-step [stepControl] ="phoneFormGroup ">
66
66
< form [formGroup] ="phoneFormGroup ">
67
67
< ng-template mdStepLabel > Fill out your phone number</ ng-template >
68
- < md-input-container >
68
+ < md-form-field >
69
69
< input mdInput placeholder ="Phone number " formControlName ="phoneCtrl ">
70
70
< md-error > This field is required</ md-error >
71
- </ md-input-container >
71
+ </ md-form-field >
72
72
< div >
73
73
< button md-button mdStepperPrevious > Back</ button >
74
74
< button md-button mdStepperNext > Next</ button >
@@ -91,15 +91,15 @@ <h3>Vertical Stepper Demo</h3>
91
91
< md-vertical-stepper >
92
92
< md-step >
93
93
< ng-template mdStepLabel > Fill out your name</ ng-template >
94
- < md-input-container >
94
+ < md-form-field >
95
95
< input mdInput placeholder ="First Name ">
96
96
< md-error > This field is required</ md-error >
97
- </ md-input-container >
97
+ </ md-form-field >
98
98
99
- < md-input-container >
99
+ < md-form-field >
100
100
< input mdInput placeholder ="Last Name ">
101
101
< md-error > This field is required</ md-error >
102
- </ md-input-container >
102
+ </ md-form-field >
103
103
< div >
104
104
< button md-button mdStepperNext type ="button "> Next</ button >
105
105
</ div >
@@ -109,10 +109,10 @@ <h3>Vertical Stepper Demo</h3>
109
109
< ng-template mdStepLabel >
110
110
< div > Fill out your phone number</ div >
111
111
</ ng-template >
112
- < md-input-container >
112
+ < md-form-field >
113
113
< input mdInput placeholder ="Phone number ">
114
114
< md-error > This field is required</ md-error >
115
- </ md-input-container >
115
+ </ md-form-field >
116
116
< div >
117
117
< button md-button mdStepperPrevious type ="button "> Back</ button >
118
118
< button md-button mdStepperNext type ="button "> Next</ button >
@@ -123,10 +123,10 @@ <h3>Vertical Stepper Demo</h3>
123
123
< ng-template mdStepLabel >
124
124
< div > Fill out your address</ div >
125
125
</ ng-template >
126
- < md-input-container >
126
+ < md-form-field >
127
127
< input mdInput placeholder ="Address ">
128
128
< md-error > This field is required</ md-error >
129
- </ md-input-container >
129
+ </ md-form-field >
130
130
< div >
131
131
< button md-button mdStepperPrevious type ="button "> Back</ button >
132
132
< button md-button mdStepperNext type ="button "> Next</ button >
@@ -146,15 +146,15 @@ <h3>Horizontal Stepper Demo</h3>
146
146
< md-horizontal-stepper >
147
147
< md-step >
148
148
< ng-template mdStepLabel > Fill out your name</ ng-template >
149
- < md-input-container >
149
+ < md-form-field >
150
150
< input mdInput placeholder ="First Name ">
151
151
< md-error > This field is required</ md-error >
152
- </ md-input-container >
152
+ </ md-form-field >
153
153
154
- < md-input-container >
154
+ < md-form-field >
155
155
< input mdInput placeholder ="Last Name ">
156
156
< md-error > This field is required</ md-error >
157
- </ md-input-container >
157
+ </ md-form-field >
158
158
< div >
159
159
< button md-button mdStepperNext type ="button "> Next</ button >
160
160
</ div >
@@ -164,10 +164,10 @@ <h3>Horizontal Stepper Demo</h3>
164
164
< ng-template mdStepLabel >
165
165
< div > Fill out your phone number</ div >
166
166
</ ng-template >
167
- < md-input-container >
167
+ < md-form-field >
168
168
< input mdInput placeholder ="Phone number ">
169
169
< md-error > This field is required</ md-error >
170
- </ md-input-container >
170
+ </ md-form-field >
171
171
< div >
172
172
< button md-button mdStepperPrevious type ="button "> Back</ button >
173
173
< button md-button mdStepperNext type ="button "> Next</ button >
@@ -178,10 +178,10 @@ <h3>Horizontal Stepper Demo</h3>
178
178
< ng-template mdStepLabel >
179
179
< div > Fill out your address</ div >
180
180
</ ng-template >
181
- < md-input-container >
181
+ < md-form-field >
182
182
< input mdInput placeholder ="Address ">
183
183
< md-error > This field is required</ md-error >
184
- </ md-input-container >
184
+ </ md-form-field >
185
185
< div >
186
186
< button md-button mdStepperPrevious type ="button "> Back</ button >
187
187
< button md-button mdStepperNext type ="button "> Next</ button >
@@ -200,9 +200,9 @@ <h3>Horizontal Stepper Demo</h3>
200
200
< h3 > Horizontal Stepper Demo</ h3 >
201
201
< md-horizontal-stepper >
202
202
< md-step *ngFor ="let step of steps " [label] ="step.label ">
203
- < md-input-container >
203
+ < md-form-field >
204
204
< input mdInput placeholder ="Answer " [(ngModel)] ="step.content ">
205
- </ md-input-container >
205
+ </ md-form-field >
206
206
< div >
207
207
< button md-button mdStepperPrevious > Back</ button >
208
208
< button md-button mdStepperNext > Next</ button >
@@ -214,9 +214,9 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
214
214
< md-horizontal-stepper >
215
215
< md-step *ngFor ="let step of steps ">
216
216
< ng-template mdStepLabel > {{step.label}}</ ng-template >
217
- < md-input-container >
217
+ < md-form-field >
218
218
< input mdInput placeholder ="Answer " [(ngModel)] ="step.content ">
219
- </ md-input-container >
219
+ </ md-form-field >
220
220
< div >
221
221
< button md-button mdStepperPrevious > Back</ button >
222
222
< button md-button mdStepperNext > Next</ button >
0 commit comments