Add linear attribute to stepper

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -84,6 +84,7 @@ export class CdkStep {
   host: {
     '(focus)': '_focusStep()',
     '(keydown)': '_onKeydown($event)',
+    '[linear]': 'linear',
   },
 })
 export class CdkStepper {
@@ -93,15 +94,19 @@ export class CdkStepper {
   /** The list of step headers of the steps in the stepper. */
   _stepHeader: QueryList<ElementRef>;
 
+  /** Whether the validity of previous steps should be checked or not. */
+  @Input()
+  get linear() { return this._linear; }
+  set linear(value: any) {
+    this._linear = coerceBooleanProperty(value);
+  }
+  private _linear = false;
+
   /** The index of the selected step. */
   @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
-    this._steps.toArray()[this._selectedIndex].interacted = true;
-    for (let i = 0; i < index; i++) {
-      if (!this._steps.toArray()[i].stepControl.valid) { return; }
-    }
-    if (this._selectedIndex != index) {
+    if (this._selectedIndex != index && !this._anyControlsInvalid(index)) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
     }
@@ -183,4 +188,17 @@ export class CdkStepper {
     this._focusIndex = index;
     this._stepHeader.toArray()[this._focusIndex].nativeElement.focus();
   }
+
+  private _anyControlsInvalid(index: number): boolean {
+    const stepsArray = this._steps.toArray();
+    stepsArray[this._selectedIndex].interacted = true;
+    if (this._linear) {
+      for (let i = 0; i < index; i++) {
+        if (!stepsArray[i].stepControl.valid) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
 }

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

@@ -1,6 +1,6 @@
 <h2>Linear Vertical Stepper Demo</h2>
 <form [formGroup]="formGroup">
-  <md-vertical-stepper formArrayName="formArray">
+  <md-vertical-stepper formArrayName="formArray" linear>
     <md-step formGroupName="0" [stepControl]="formArray.get([0])">
       <ng-template mdStepLabel>Fill out your name</ng-template>
       <md-input-container>

src/lib/stepper/stepper.ts

@@ -28,15 +28,7 @@ import {
   MD_ERROR_GLOBAL_OPTIONS,
   ErrorStateMatcher
 } from '../core/error/error-options';
-import {
-  FormArray, FormControl, FormGroupDirective, NgForm, ValidationErrors,
-  ValidatorFn
-} from '@angular/forms';
-
-/**
- * Form array validator to check if all form groups in form array are valid.
- * If not, it will return the index of the first invalid form group.
- */
+import {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 
 @Component({
   moduleId: module.id,