feat(stepper): Add support for linear stepper

src/cdk/stepper/stepper.ts

@@ -24,6 +24,7 @@ import {
 } from '@angular/core';
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keyboard';
 import {CdkStepLabel} from './step-label';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -45,7 +46,7 @@ export class CdkStepperSelectionEvent {
 
 @Component({
   selector: 'cdk-step',
-  templateUrl: 'step.html',
+  templateUrl: 'step.html'
 })
 export class CdkStep {
   /** Template for step label if it exists. */
@@ -54,6 +55,18 @@ export class CdkStep {
   /** Template for step content. */
   @ViewChild(TemplateRef) content: TemplateRef<any>;
 
+  // TODO(jwshin): use disabled mixin when moved to cdk.
+  /** Whether step is disabled or not. */
+  @Input()
+  get disabled() { return this._disabled; }
+  set disabled(value: any) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
+  /** Whether user has seen the expanded step content or not . */
+  interacted = false;
+
   /** Label of the step. */
   @Input()
   label: string;
@@ -84,7 +97,8 @@ export class CdkStepper {
   @Input()
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
-    if (this._selectedIndex != index) {
+    this._steps.toArray()[this._selectedIndex].interacted = true;
+    if (this._selectedIndex != index && !this._steps.toArray()[index].disabled) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
     }
@@ -153,7 +167,7 @@ export class CdkStepper {
         break;
       case SPACE:
       case ENTER:
-        this._emitStepperSelectionEvent(this._focusIndex);
+        this.selectedIndex = this._focusIndex;
         break;
       default:
         // Return to avoid calling preventDefault on keys that are not explicitly handled.

src/cdk/stepper/tsconfig-build.json

@@ -4,7 +4,8 @@
     "outDir": "../../../dist/packages/cdk",
     "baseUrl": ".",
     "paths": {
-      "@angular/cdk/keyboard": ["../../../dist/packages/cdk/keyboard/public_api"]
+      "@angular/cdk/keyboard": ["../../../dist/packages/cdk/keyboard/public_api"],
+      "@angular/cdk/coercion": ["../../../dist/packages/cdk/coercion/public_api"]
     }
   },
   "files": [

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

@@ -1,3 +1,50 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<form [formGroup]="formGroup">
+  <md-vertical-stepper formArrayName="formArray">
+    <md-step formGroupName="0">
+      <ng-template mdStepLabel>Fill out your name</ng-template>
+      <md-input-container>
+        <input mdInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+
+      <md-input-container>
+        <input mdInput placeholder="Last Name" formControlName="lastNameFormCtrl" required>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+      <div>
+        <button md-button mdStepperNext type="button">Next</button>
+      </div>
+    </md-step>
+
+    <md-step formGroupName="1"
+             [disabled]="formArray.hasError('invalid step') ?
+             formArray.getError('invalid step').index <= 1 : false">
+      <ng-template mdStepLabel>
+        <div>Fill out your phone number</div>
+      </ng-template>
+      <md-input-container>
+        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl">
+        <md-error>This field is required</md-error>
+      </md-input-container>
+      <div>
+        <button md-button mdStepperPrevious type="button">Back</button>
+        <button md-button mdStepperNext type="button">Next</button>
+      </div>
+    </md-step>
+
+    <md-step
+        [disabled]="formArray.hasError('invalid step') ?
+        formArray.getError('invalid step').index <= 2 : false">
+      <ng-template mdStepLabel>Confirm your information</ng-template>
+      Everything seems correct.
+      <div>
+        <button md-button>Done</button>
+      </div>
+    </md-step>
+  </md-vertical-stepper>
+</form>
+
 <h2>Horizontal Stepper Demo</h2>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps" [label]="step.label">

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

@@ -1,4 +1,6 @@
 import {Component} from '@angular/core';
+import {Validators, FormBuilder, FormGroup} from '@angular/forms';
+import {stepValidator} from '@angular/material';
 
 @Component({
   moduleId: module.id,
@@ -7,10 +9,31 @@ import {Component} from '@angular/core';
   styleUrls: ['stepper-demo.scss'],
 })
 export class StepperDemo {
+  formGroup: FormGroup;
+
   steps = [
     {label: 'Confirm your name', content: 'Last name, First name.'},
     {label: 'Confirm your contact information', content: '123-456-7890'},
     {label: 'Confirm your address', content: '1600 Amphitheater Pkwy MTV'},
     {label: 'You are now done', content: 'Finished!'}
   ];
+
+  /** Returns a FormArray with the name 'formArray'. */
+  get formArray() { return this.formGroup.get('formArray'); }
+
+  constructor(private _formBuilder: FormBuilder) { }
+
+  ngOnInit() {
+    this.formGroup = this._formBuilder.group({
+      formArray: this._formBuilder.array([
+        this._formBuilder.group({
+          firstNameFormCtrl: ['', Validators.required],
+          lastNameFormCtrl: ['', Validators.required],
+        }),
+        this._formBuilder.group({
+          phoneFormCtrl: [''],
+        })
+      ], stepValidator)
+    });
+  }
 }

src/lib/stepper/stepper.ts

@@ -15,26 +15,79 @@ import {
   // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
   // tslint:disable-next-line:no-unused-variable
   ElementRef,
+  Inject,
+  Optional,
   QueryList,
+  SkipSelf,
   ViewChildren
 }from '@angular/core';
 import {MdStepLabel} from './step-label';
+import {
+  defaultErrorStateMatcher,
+  ErrorOptions,
+  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.
+ */
+export const stepValidator: ValidatorFn = (formArray: FormArray): ValidationErrors | null => {
+  for (let i = 0; i < formArray.length; i++) {
+    if (formArray.at(i).invalid) {
+      return {'invalid step': {'index': i}};
+    }
+  }
+  return null;
+};
+
+/**
+ * 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.
+ */
 
 @Component({
   moduleId: module.id,
   selector: 'md-step, mat-step',
   templateUrl: 'step.html',
+  providers: [{provide: MD_ERROR_GLOBAL_OPTIONS, useExisting: MdStep}]
 })
-export class MdStep extends CdkStep {
+export class MdStep extends CdkStep implements ErrorOptions {
   /** Content for step label given by <ng-template matStepLabel> or <ng-template mdStepLabel>. */
   @ContentChild(MdStepLabel) stepLabel: MdStepLabel;
 
-  constructor(mdStepper: MdStepper) {
+  /** Original ErrorStateMatcher that checks the validity of form control. */
+  private _originalErrorStateMatcher: ErrorStateMatcher;
+
+  constructor(mdStepper: MdStepper,
+              @Optional() @SkipSelf() @Inject(MD_ERROR_GLOBAL_OPTIONS) errorOptions: ErrorOptions) {
     super(mdStepper);
+    this._originalErrorStateMatcher =
+        errorOptions ? errorOptions.errorStateMatcher || defaultErrorStateMatcher
+            : defaultErrorStateMatcher;
+  }
+
+  /** Custom error state matcher that additionally checks for validity of interacted form. */
+  errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => {
+    let originalErrorState = this._originalErrorStateMatcher(control, form);
+
+    /**
+     * Custom error state checks for the validity of form that is not submitted or touched
+     * since user can trigger a form change by calling for another step without directly
+     * interacting with the current form.
+     */
+    let customErrorState =  control.invalid && this.interacted;
+
+    return originalErrorState || customErrorState;
   }
 }
 
-export class MdStepper extends CdkStepper {
+export class MdStepper extends CdkStepper implements ErrorOptions {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren('stepHeader') _stepHeader: QueryList<ElementRef>;
 

src/lib/table/cell.ts

@@ -7,7 +7,13 @@
  */
 
 import {Directive, ElementRef, Input, Renderer2} from '@angular/core';
-import {CdkCell, CdkCellDef, CdkColumnDef, CdkHeaderCell, CdkHeaderCellDef} from '@angular/cdk/table';
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef
+} from '@angular/cdk/table';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _MdCellDef = CdkCellDef;

src/lib/table/row.ts

@@ -7,7 +7,13 @@
  */
 
 import {ChangeDetectionStrategy, Component, Directive} from '@angular/core';
-import {CdkHeaderRow, CdkRow, CDK_ROW_TEMPLATE, CdkRowDef, CdkHeaderRowDef} from '@angular/cdk/table';
+import {
+  CdkHeaderRow,
+  CdkRow,
+  CDK_ROW_TEMPLATE,
+  CdkRowDef,
+  CdkHeaderRowDef
+} from '@angular/cdk/table';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
 export const _MdHeaderRowDef = CdkHeaderRowDef;