Skip to content

Commit e648c0e

Browse files
committed
Add linear attribute to stepper
1 parent 71cb69f commit e648c0e

File tree

3 files changed

+25
-15
lines changed

3 files changed

+25
-15
lines changed

src/cdk/stepper/stepper.ts

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export class CdkStep {
8484
host: {
8585
'(focus)': '_focusStep()',
8686
'(keydown)': '_onKeydown($event)',
87+
'[linear]': 'linear',
8788
},
8889
})
8990
export class CdkStepper {
@@ -93,15 +94,19 @@ export class CdkStepper {
9394
/** The list of step headers of the steps in the stepper. */
9495
_stepHeader: QueryList<ElementRef>;
9596

97+
/** Whether the validity of previous steps should be checked or not. */
98+
@Input()
99+
get linear() { return this._linear; }
100+
set linear(value: any) {
101+
this._linear = coerceBooleanProperty(value);
102+
}
103+
private _linear = false;
104+
96105
/** The index of the selected step. */
97106
@Input()
98107
get selectedIndex() { return this._selectedIndex; }
99108
set selectedIndex(index: number) {
100-
this._steps.toArray()[this._selectedIndex].interacted = true;
101-
for (let i = 0; i < index; i++) {
102-
if (!this._steps.toArray()[i].stepControl.valid) { return; }
103-
}
104-
if (this._selectedIndex != index) {
109+
if (this._selectedIndex != index && !this._anyControlsInvalid(index)) {
105110
this._emitStepperSelectionEvent(index);
106111
this._focusStep(this._selectedIndex);
107112
}
@@ -183,4 +188,17 @@ export class CdkStepper {
183188
this._focusIndex = index;
184189
this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
185190
}
191+
192+
private _anyControlsInvalid(index: number): boolean {
193+
const stepsArray = this._steps.toArray();
194+
stepsArray[this._selectedIndex].interacted = true;
195+
if (this._linear) {
196+
for (let i = 0; i < index; i++) {
197+
if (!stepsArray[i].stepControl.valid) {
198+
return true;
199+
}
200+
}
201+
}
202+
return false;
203+
}
186204
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<h2>Linear Vertical Stepper Demo</h2>
22
<form [formGroup]="formGroup">
3-
<md-vertical-stepper formArrayName="formArray">
3+
<md-vertical-stepper formArrayName="formArray" linear>
44
<md-step formGroupName="0" [stepControl]="formArray.get([0])">
55
<ng-template mdStepLabel>Fill out your name</ng-template>
66
<md-input-container>

src/lib/stepper/stepper.ts

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,15 +28,7 @@ import {
2828
MD_ERROR_GLOBAL_OPTIONS,
2929
ErrorStateMatcher
3030
} from '../core/error/error-options';
31-
import {
32-
FormArray, FormControl, FormGroupDirective, NgForm, ValidationErrors,
33-
ValidatorFn
34-
} from '@angular/forms';
35-
36-
/**
37-
* Form array validator to check if all form groups in form array are valid.
38-
* If not, it will return the index of the first invalid form group.
39-
*/
31+
import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
4032

4133
@Component({
4234
moduleId: module.id,

0 commit comments

Comments
 (0)