Skip to content

Commit 3f05ce2

Browse files
committed
Add [stepControl] to each step based on merging
1 parent dc3586e commit 3f05ce2

File tree

3 files changed

+21
-25
lines changed

3 files changed

+21
-25
lines changed

src/cdk/stepper/stepper.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@ export class CdkStepper {
209209
stepsArray[this._selectedIndex].interacted = true;
210210
if (this._linear) {
211211
for (let i = 0; i < index; i++) {
212-
if (!stepsArray[i].stepControl.valid) {
212+
if (stepsArray[i].stepControl.invalid) {
213213
return true;
214214
}
215215
}

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

Lines changed: 15 additions & 16 deletions
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 FormArray</h3>
34
<form [formGroup]="formGroup">
45
<md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
56
<md-step formGroupName="0" [stepControl]="formArray.get([0])">
@@ -42,17 +43,17 @@ <h2>Linear Vertical Stepper Demo</h2>
4243
</md-vertical-stepper>
4344
</form>
4445

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">
4849
<form [formGroup]="nameFormGroup">
4950
<ng-template mdStepLabel>Fill out your name</ng-template>
5051
<md-input-container>
51-
<input mdInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
52+
<input mdInput placeholder="First Name" formControlName="firstNameCtrl" required>
5253
<md-error>This field is required</md-error>
5354
</md-input-container>
5455
<md-input-container>
55-
<input mdInput placeholder="Last Name" formControlName="lastNameFormCtrl" required>
56+
<input mdInput placeholder="Last Name" formControlName="lastNameCtrl" required>
5657
<md-error>This field is required</md-error>
5758
</md-input-container>
5859
<div>
@@ -61,13 +62,11 @@ <h2>Linear Vertical Stepper Demo</h2>
6162
</form>
6263
</md-step>
6364

64-
<md-step [valid]="phoneFormGroup.valid">
65+
<md-step [stepControl]="phoneFormGroup">
6566
<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>
6968
<md-input-container>
70-
<input mdInput placeholder="Phone number" formControlName="phoneFormCtrl">
69+
<input mdInput placeholder="Phone number" formControlName="phoneCtrl">
7170
<md-error>This field is required</md-error>
7271
</md-input-container>
7372
<div>
@@ -86,9 +85,9 @@ <h2>Linear Vertical Stepper Demo</h2>
8685
</div>
8786
</form>
8887
</md-step>
89-
</md-vertical-stepper>
88+
</md-horizontal-stepper>
9089

91-
<h2>Vertical Stepper Demo</h2>
90+
<h3>Vertical Stepper Demo</h3>
9291
<md-vertical-stepper>
9392
<md-step>
9493
<ng-template mdStepLabel>Fill out your name</ng-template>
@@ -143,7 +142,7 @@ <h2>Vertical Stepper Demo</h2>
143142
</md-step>
144143
</md-vertical-stepper>
145144

146-
<h2>Horizontal Stepper Demo</h2>
145+
<h3>Horizontal Stepper Demo</h3>
147146
<md-horizontal-stepper>
148147
<md-step>
149148
<ng-template mdStepLabel>Fill out your name</ng-template>
@@ -198,7 +197,7 @@ <h2>Horizontal Stepper Demo</h2>
198197
</md-step>
199198
</md-horizontal-stepper>
200199

201-
<h2>Horizontal Stepper Demo</h2>
200+
<h3>Horizontal Stepper Demo</h3>
202201
<md-horizontal-stepper>
203202
<md-step *ngFor="let step of steps" [label]="step.label">
204203
<md-input-container>
@@ -211,7 +210,7 @@ <h2>Horizontal Stepper Demo</h2>
211210
</md-step>
212211
</md-horizontal-stepper>
213212

214-
<h2>Horizontal Stepper Demo with Templated Label</h2>
213+
<h3>Horizontal Stepper Demo with Templated Label</h3>
215214
<md-horizontal-stepper>
216215
<md-step *ngFor="let step of steps">
217216
<ng-template mdStepLabel>{{step.label}}</ng-template>

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

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,9 @@ export class StepperDemo {
2222
];
2323

2424
/** Returns a FormArray with the name 'formArray'. */
25-
get formArray() {
26-
return this.formGroup.get('formArray');
27-
}
25+
get formArray() { return this.formGroup.get('formArray'); }
2826

29-
constructor(private _formBuilder: FormBuilder) {
30-
}
27+
constructor(private _formBuilder: FormBuilder) { }
3128

3229
ngOnInit() {
3330
this.formGroup = this._formBuilder.group({
@@ -43,12 +40,12 @@ export class StepperDemo {
4340
});
4441

4542
this.nameFormGroup = new FormGroup({
46-
firstNameFormCtrl: new FormControl('', Validators.required),
47-
lastNameFormCtrl: new FormControl('', Validators.required)
43+
firstNameCtrl: new FormControl('', Validators.required),
44+
lastNameCtrl: new FormControl('', Validators.required)
4845
});
4946

5047
this.phoneFormGroup = new FormGroup({
51-
phoneFormCtrl: new FormControl('')
48+
phoneCtrl: new FormControl('')
5249
});
5350
}
5451
}

0 commit comments

Comments
 (0)