Skip to content

Commit 28f4ceb

Browse files
jwshinjwshinjwshinjwshin
committed
Changes based on review
1 parent 127789b commit 28f4ceb

File tree

3 files changed

+36
-40
lines changed

3 files changed

+36
-40
lines changed

‎src/cdk/stepper/stepper.ts‎

Lines changed: 1 addition & 5 deletions
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.invalid) {
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‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
22

3-
<h3>Linear Vertical Stepper Demo using FormArray</h3>
3+
<h3>Linear Vertical Stepper Demo using a single form</h3>
44
<form [formGroup]="formGroup">
55
<md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
66
<md-step formGroupName="0" [stepControl]="formArray.get([0])">
@@ -43,19 +43,19 @@ <h3>Linear Vertical Stepper Demo using FormArray</h3>
4343
</md-vertical-stepper>
4444
</form>
4545

46-
<h3>Linear Horizontal Stepper Demo using multiple FormGroups</h3>
46+
<h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
4747
<md-horizontal-stepper [linear]="!isNonLinear">
4848
<md-step [stepControl]="nameFormGroup">
4949
<form [formGroup]="nameFormGroup">
5050
<ng-template mdStepLabel>Fill out your name</ng-template>
51-
<md-input-container>
51+
<md-form-field>
5252
<input mdInput placeholder="First Name" formControlName="firstNameCtrl" required>
5353
<md-error>This field is required</md-error>
54-
</md-input-container>
55-
<md-input-container>
54+
</md-form-field>
55+
<md-form-field>
5656
<input mdInput placeholder="Last Name" formControlName="lastNameCtrl" required>
5757
<md-error>This field is required</md-error>
58-
</md-input-container>
58+
</md-form-field>
5959
<div>
6060
<button md-button mdStepperNext>Next</button>
6161
</div>
@@ -65,10 +65,10 @@ <h3>Linear Horizontal Stepper Demo using multiple FormGroups</h3>
6565
<md-step [stepControl]="phoneFormGroup">
6666
<form [formGroup]="phoneFormGroup">
6767
<ng-template mdStepLabel>Fill out your phone number</ng-template>
68-
<md-input-container>
69-
<input mdInput placeholder="Phone number" formControlName="phoneCtrl">
68+
<md-form-field>
69+
<input mdInput placeholder="Phone number" formControlName="phoneCtrl" required>
7070
<md-error>This field is required</md-error>
71-
</md-input-container>
71+
</md-form-field>
7272
<div>
7373
<button md-button mdStepperPrevious>Back</button>
7474
<button md-button mdStepperNext>Next</button>
@@ -91,15 +91,15 @@ <h3>Vertical Stepper Demo</h3>
9191
<md-vertical-stepper>
9292
<md-step>
9393
<ng-template mdStepLabel>Fill out your name</ng-template>
94-
<md-input-container>
94+
<md-form-field>
9595
<input mdInput placeholder="First Name">
9696
<md-error>This field is required</md-error>
97-
</md-input-container>
97+
</md-form-field>
9898

99-
<md-input-container>
99+
<md-form-field>
100100
<input mdInput placeholder="Last Name">
101101
<md-error>This field is required</md-error>
102-
</md-input-container>
102+
</md-form-field>
103103
<div>
104104
<button md-button mdStepperNext type="button">Next</button>
105105
</div>
@@ -109,10 +109,10 @@ <h3>Vertical Stepper Demo</h3>
109109
<ng-template mdStepLabel>
110110
<div>Fill out your phone number</div>
111111
</ng-template>
112-
<md-input-container>
112+
<md-form-field>
113113
<input mdInput placeholder="Phone number">
114114
<md-error>This field is required</md-error>
115-
</md-input-container>
115+
</md-form-field>
116116
<div>
117117
<button md-button mdStepperPrevious type="button">Back</button>
118118
<button md-button mdStepperNext type="button">Next</button>
@@ -123,10 +123,10 @@ <h3>Vertical Stepper Demo</h3>
123123
<ng-template mdStepLabel>
124124
<div>Fill out your address</div>
125125
</ng-template>
126-
<md-input-container>
126+
<md-form-field>
127127
<input mdInput placeholder="Address">
128128
<md-error>This field is required</md-error>
129-
</md-input-container>
129+
</md-form-field>
130130
<div>
131131
<button md-button mdStepperPrevious type="button">Back</button>
132132
<button md-button mdStepperNext type="button">Next</button>
@@ -146,15 +146,15 @@ <h3>Horizontal Stepper Demo</h3>
146146
<md-horizontal-stepper>
147147
<md-step>
148148
<ng-template mdStepLabel>Fill out your name</ng-template>
149-
<md-input-container>
149+
<md-form-field>
150150
<input mdInput placeholder="First Name">
151151
<md-error>This field is required</md-error>
152-
</md-input-container>
152+
</md-form-field>
153153

154-
<md-input-container>
154+
<md-form-field>
155155
<input mdInput placeholder="Last Name">
156156
<md-error>This field is required</md-error>
157-
</md-input-container>
157+
</md-form-field>
158158
<div>
159159
<button md-button mdStepperNext type="button">Next</button>
160160
</div>
@@ -164,10 +164,10 @@ <h3>Horizontal Stepper Demo</h3>
164164
<ng-template mdStepLabel>
165165
<div>Fill out your phone number</div>
166166
</ng-template>
167-
<md-input-container>
167+
<md-form-field>
168168
<input mdInput placeholder="Phone number">
169169
<md-error>This field is required</md-error>
170-
</md-input-container>
170+
</md-form-field>
171171
<div>
172172
<button md-button mdStepperPrevious type="button">Back</button>
173173
<button md-button mdStepperNext type="button">Next</button>
@@ -178,10 +178,10 @@ <h3>Horizontal Stepper Demo</h3>
178178
<ng-template mdStepLabel>
179179
<div>Fill out your address</div>
180180
</ng-template>
181-
<md-input-container>
181+
<md-form-field>
182182
<input mdInput placeholder="Address">
183183
<md-error>This field is required</md-error>
184-
</md-input-container>
184+
</md-form-field>
185185
<div>
186186
<button md-button mdStepperPrevious type="button">Back</button>
187187
<button md-button mdStepperNext type="button">Next</button>
@@ -200,9 +200,9 @@ <h3>Horizontal Stepper Demo</h3>
200200
<h3>Horizontal Stepper Demo</h3>
201201
<md-horizontal-stepper>
202202
<md-step *ngFor="let step of steps" [label]="step.label">
203-
<md-input-container>
203+
<md-form-field>
204204
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
205-
</md-input-container>
205+
</md-form-field>
206206
<div>
207207
<button md-button mdStepperPrevious>Back</button>
208208
<button md-button mdStepperNext>Next</button>
@@ -214,9 +214,9 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
214214
<md-horizontal-stepper>
215215
<md-step *ngFor="let step of steps">
216216
<ng-template mdStepLabel>{{step.label}}</ng-template>
217-
<md-input-container>
217+
<md-form-field>
218218
<input mdInput placeholder="Answer" [(ngModel)]="step.content">
219-
</md-input-container>
219+
</md-form-field>
220220
<div>
221221
<button md-button mdStepperPrevious>Back</button>
222222
<button md-button mdStepperNext>Next</button>

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component} from '@angular/core';
2-
import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
2+
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
33

44
@Component({
55
moduleId: module.id,
@@ -39,13 +39,13 @@ export class StepperDemo {
3939
])
4040
});
4141

42-
this.nameFormGroup = new FormGroup({
43-
firstNameCtrl: new FormControl('', Validators.required),
44-
lastNameCtrl: new FormControl('', Validators.required)
42+
this.nameFormGroup = this._formBuilder.group({
43+
firstNameCtrl: ['', Validators.required],
44+
lastNameCtrl: ['', Validators.required],
4545
});
4646

47-
this.phoneFormGroup = new FormGroup({
48-
phoneCtrl: new FormControl('')
47+
this.phoneFormGroup = this._formBuilder.group({
48+
phoneCtrl: ['', Validators.required]
4949
});
5050
}
5151
}

0 commit comments

Comments
 (0)