Add form control - consider each step as its own form group

Author: jwshinjwshin

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;
@@ -54,6 +55,21 @@ export class CdkStep {
   /** Template for step content. */
   @ViewChild(TemplateRef) content: TemplateRef<any>;
 
+  /** Whether step is disabled or not. */
+  @Input()
+  get disabled() { return this._disabled; }
+  set disabled(value: any) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+  private _disabled = false;
+
+  /** Whether the user has interacted with step or not. */
+  get interacted() { return this._interacted; }
+  set interacted(value: any) {
+    this._interacted = coerceBooleanProperty(value);
+  }
+  private _interacted = false;
+
   /** Label of the step. */
   @Input()
   label: string;
@@ -84,7 +100,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 +170,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,49 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<md-vertical-stepper>
+  <md-step>
+    <form [formGroup]="nameFormGroup" novalidate>
+      <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>Next</button>
+      </div>
+    </form>
+  </md-step>
+
+  <md-step [disabled]="!nameFormGroup.valid">
+    <form [formGroup]="phoneFormGroup" novalidate>
+      <ng-template mdStepLabel>
+        <div>Fill out your phone number</div>
+      </ng-template>
+      <md-input-container>
+        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl" required>
+        <md-error>This field is required</md-error>
+      </md-input-container>
+      <div>
+        <button md-button mdStepperPrevious>Back</button>
+        <button md-button mdStepperNext>Next</button>
+      </div>
+    </form>
+  </md-step>
+
+  <md-step [disabled]="!phoneFormGroup.valid">
+    <form>
+      <ng-template mdStepLabel>Confirm your information</ng-template>
+      Everything seems correct.
+      <div>
+        <button md-button>Done</button>
+      </div>
+    </form>
+  </md-step>
+</md-vertical-stepper>
+
 <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,5 @@
 import {Component} from '@angular/core';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   moduleId: module.id,
@@ -7,10 +8,24 @@ import {Component} from '@angular/core';
   styleUrls: ['stepper-demo.scss'],
 })
 export class StepperDemo {
+  nameFormGroup: FormGroup;
+  phoneFormGroup: 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!'}
   ];
+
+  ngOnInit() {
+    this.nameFormGroup = new FormGroup({
+      firstNameFormCtrl: new FormControl('', Validators.required),
+      lastNameFormCtrl: new FormControl('', Validators.required)
+    });
+
+    this.phoneFormGroup = new FormGroup({
+      phoneFormCtrl: new FormControl('', Validators.required)
+    });
+  }
 }

src/lib/stepper/stepper.ts

@@ -15,22 +15,48 @@ 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 {FormControl, FormGroupDirective, NgForm} from '@angular/forms';
 
 @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 {
   /** 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);
+    let customErrorState =  control.invalid && this.interacted;
+
+    return originalErrorState || customErrorState;
   }
 }
 

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;