Skip to content

Commit b97271b

Browse files
jwshinjwshinjwshinjwshin
committed
Add [stepControl] to each step based on merging
1 parent b342e83 commit b97271b

File tree

3 files changed

+59
-68
lines changed

3 files changed

+59
-68
lines changed

‎src/cdk/stepper/stepper.ts‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -56,17 +56,6 @@ export class CdkStep {
5656
/** Template for step content. */
5757
@ViewChild(TemplateRef) content: TemplateRef<any>;
5858

59-
/** Whether the step is in a valid state or not. */
60-
@Input()
61-
get valid() { return this._valid; }
62-
set valid(value: any) {
63-
this._valid = coerceBooleanProperty(value);
64-
}
65-
private _valid = true;
66-
67-
/** Whether user has seen the expanded step content or not . */
68-
interacted = false;
69-
7059
/** The top level abstract control of the step. */
7160
@Input()
7261
get stepControl() { return this._stepControl; }
@@ -75,6 +64,9 @@ export class CdkStep {
7564
}
7665
private _stepControl: AbstractControl;
7766

67+
/** Whether user has seen the expanded step content or not . */
68+
interacted = false;
69+
7870
/** Label of the step. */
7971
@Input()
8072
label: string;
@@ -199,7 +191,7 @@ export class CdkStepper {
199191
stepsArray[this._selectedIndex].interacted = true;
200192
if (this._linear) {
201193
for (let i = 0; i < index; i++) {
202-
if (!stepsArray[i].stepControl.valid) {
194+
if (stepsArray[i].stepControl.invalid) {
203195
return true;
204196
}
205197
}

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

Lines changed: 52 additions & 53 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,8 +43,52 @@ <h2>Linear Vertical Stepper Demo</h2>
4243
</md-vertical-stepper>
4344
</form>
4445

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>
4792
<md-step>
4893
<ng-template mdStepLabel>Fill out your name</ng-template>
4994
<md-input-container>
@@ -95,55 +140,9 @@ <h2>Vertical Stepper Demo</h2>
95140
<button md-button>Done</button>
96141
</div>
97142
</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>
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: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ export class StepperDemo {
4040
});
4141

4242
this.nameFormGroup = new FormGroup({
43-
firstNameFormCtrl: new FormControl('', Validators.required),
44-
lastNameFormCtrl: new FormControl('', Validators.required)
43+
firstNameCtrl: new FormControl('', Validators.required),
44+
lastNameCtrl: new FormControl('', Validators.required)
4545
});
4646

4747
this.phoneFormGroup = new FormGroup({
48-
phoneFormCtrl: new FormControl('')
48+
phoneCtrl: new FormControl('')
4949
});
5050
}
5151
}

0 commit comments

Comments
 (0)