Skip to content

Commit 6ce8b9f

Browse files
jwshinjwshinjwshinjwshin
authored
feat(stepper): Add support for linear stepper #2 - each step as its own form. (#6117)
* Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review
1 parent 39a3649 commit 6ce8b9f

File tree

3 files changed

+84
-31
lines changed

3 files changed

+84
-31
lines changed

‎src/cdk/stepper/stepper.ts

+1-5
Original file line numberDiff line numberDiff line change
@@ -208,11 +208,7 @@ export class CdkStepper {
208208
const stepsArray = this._steps.toArray();
209209
stepsArray[this._selectedIndex].interacted = true;
210210
if (this._linear) {
211-
for (let i = 0; i < index; i++) {
212-
if (!stepsArray[i].stepControl.valid) {
213-
return true;
214-
}
215-
}
211+
return stepsArray.slice(0, index).some(step => step.stepControl.invalid);
216212
}
217213
return false;
218214
}

‎src/demo-app/stepper/stepper-demo.html

+70-25
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
<h2>Linear Vertical Stepper Demo</h2>
21
<md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
2+
3+
<h3>Linear Vertical Stepper Demo using a single form</h3>
34
<form [formGroup]="formGroup">
45
<md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
56
<md-step formGroupName="0" [stepControl]="formArray.get([0])">
@@ -42,19 +43,63 @@ <h2>Linear Vertical Stepper Demo</h2>
4243
</md-vertical-stepper>
4344
</form>
4445

45-
<h2>Vertical Stepper Demo</h2>
46+
<h3>Linear Horizontal Stepper Demo using a different form for each step</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-form-field>
52+
<input mdInput placeholder="First Name" formControlName="firstNameCtrl" required>
53+
<md-error>This field is required</md-error>
54+
</md-form-field>
55+
<md-form-field>
56+
<input mdInput placeholder="Last Name" formControlName="lastNameCtrl" required>
57+
<md-error>This field is required</md-error>
58+
</md-form-field>
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-form-field>
69+
<input mdInput placeholder="Phone number" formControlName="phoneCtrl" required>
70+
<md-error>This field is required</md-error>
71+
</md-form-field>
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>
4691
<md-vertical-stepper>
4792
<md-step>
4893
<ng-template mdStepLabel>Fill out your name</ng-template>
49-
<md-input-container>
94+
<md-form-field>
5095
<input mdInput placeholder="First Name">
5196
<md-error>This field is required</md-error>
52-
</md-input-container>
97+
</md-form-field>
5398

54-
<md-input-container>
99+
<md-form-field>
55100
<input mdInput placeholder="Last Name">
56101
<md-error>This field is required</md-error>
57-
</md-input-container>
102+
</md-form-field>
58103
<div>
59104
<button md-button mdStepperNext type="button">Next</button>
60105
</div>
@@ -64,10 +109,10 @@ <h2>Vertical Stepper Demo</h2>
64109
<ng-template mdStepLabel>
65110
<div>Fill out your phone number</div>
66111
</ng-template>
67-
<md-input-container>
112+
<md-form-field>
68113
<input mdInput placeholder="Phone number">
69114
<md-error>This field is required</md-error>
70-
</md-input-container>
115+
</md-form-field>
71116
<div>
72117
<button md-button mdStepperPrevious type="button">Back</button>
73118
<button md-button mdStepperNext type="button">Next</button>
@@ -78,10 +123,10 @@ <h2>Vertical Stepper Demo</h2>
78123
<ng-template mdStepLabel>
79124
<div>Fill out your address</div>
80125
</ng-template>
81-
<md-input-container>
126+
<md-form-field>
82127
<input mdInput placeholder="Address">
83128
<md-error>This field is required</md-error>
84-
</md-input-container>
129+
</md-form-field>
85130
<div>
86131
<button md-button mdStepperPrevious type="button">Back</button>
87132
<button md-button mdStepperNext type="button">Next</button>
@@ -97,19 +142,19 @@ <h2>Vertical Stepper Demo</h2>
97142
</md-step>
98143
</md-vertical-stepper>
99144

100-
<h2>Horizontal Stepper Demo</h2>
145+
<h3>Horizontal Stepper Demo</h3>
101146
<md-horizontal-stepper>
102147
<md-step>
103148
<ng-template mdStepLabel>Fill out your name</ng-template>
104-
<md-input-container>
149+
<md-form-field>
105150
<input mdInput placeholder="First Name">
106151
<md-error>This field is required</md-error>
107-
</md-input-container>
152+
</md-form-field>
108153

109-
<md-input-container>
154+
<md-form-field>
110155
<input mdInput placeholder="Last Name">
111156
<md-error>This field is required</md-error>
112-
</md-input-container>
157+
</md-form-field>
113158
<div>
114159
<button md-button mdStepperNext type="button">Next</button>
115160
</div>
@@ -119,10 +164,10 @@ <h2>Horizontal Stepper Demo</h2>
119164
<ng-template mdStepLabel>
120165
<div>Fill out your phone number</div>
121166
</ng-template>
122-
<md-input-container>
167+
<md-form-field>
123168
<input mdInput placeholder="Phone number">
124169
<md-error>This field is required</md-error>
125-
</md-input-container>
170+
</md-form-field>
126171
<div>
127172
<button md-button mdStepperPrevious type="button">Back</button>
128173
<button md-button mdStepperNext type="button">Next</button>
@@ -133,10 +178,10 @@ <h2>Horizontal Stepper Demo</h2>
133178
<ng-template mdStepLabel>
134179
<div>Fill out your address</div>
135180
</ng-template>
136-
<md-input-container>
181+
<md-form-field>
137182
<input mdInput placeholder="Address">
138183
<md-error>This field is required</md-error>
139-
</md-input-container>
184+
</md-form-field>
140185
<div>
141186
<button md-button mdStepperPrevious type="button">Back</button>
142187
<button md-button mdStepperNext type="button">Next</button>
@@ -152,26 +197,26 @@ <h2>Horizontal Stepper Demo</h2>
152197
</md-step>
153198
</md-horizontal-stepper>
154199

155-
<h2>Horizontal Stepper Demo</h2>
200+
<h3>Horizontal Stepper Demo</h3>
156201
<md-horizontal-stepper>
157202
<md-step *ngFor="let step of steps" [label]="step.label">
158-
<md-input-container>
203+
<md-form-field>
159204
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
160-
</md-input-container>
205+
</md-form-field>
161206
<div>
162207
<button md-button mdStepperPrevious>Back</button>
163208
<button md-button mdStepperNext>Next</button>
164209
</div>
165210
</md-step>
166211
</md-horizontal-stepper>
167212

168-
<h2>Horizontal Stepper Demo with Templated Label</h2>
213+
<h3>Horizontal Stepper Demo with Templated Label</h3>
169214
<md-horizontal-stepper>
170215
<md-step *ngFor="let step of steps">
171216
<ng-template mdStepLabel>{{step.label}}</ng-template>
172-
<md-input-container>
217+
<md-form-field>
173218
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
174-
</md-input-container>
219+
</md-form-field>
175220
<div>
176221
<button md-button mdStepperPrevious>Back</button>
177222
<button md-button mdStepperNext>Next</button>

‎src/demo-app/stepper/stepper-demo.ts

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {Validators, FormBuilder, FormGroup} from '@angular/forms';
2+
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
33

44
@Component({
55
moduleId: module.id,
@@ -11,6 +11,9 @@ export class StepperDemo {
1111
formGroup: FormGroup;
1212
isNonLinear = false;
1313

14+
nameFormGroup: FormGroup;
15+
phoneFormGroup: FormGroup;
16+
1417
steps = [
1518
{label: 'Confirm your name', content: 'Last name, First name.'},
1619
{label: 'Confirm your contact information', content: '123-456-7890'},
@@ -35,5 +38,14 @@ export class StepperDemo {
3538
})
3639
])
3740
});
41+
42+
this.nameFormGroup = this._formBuilder.group({
43+
firstNameCtrl: ['', Validators.required],
44+
lastNameCtrl: ['', Validators.required],
45+
});
46+
47+
this.phoneFormGroup = this._formBuilder.group({
48+
phoneCtrl: ['', Validators.required]
49+
});
3850
}
3951
}

0 commit comments

Comments
 (0)