Add form controls and custom error state matcher

Author: jwshinjwshin

src/cdk/stepper/stepper-button.ts

@@ -12,7 +12,10 @@ import {CdkStepper} from './stepper';
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperNext]',
-  host: {'(click)': '_stepper.next()'}
+  host: {
+    '(click)': '_stepper.next()',
+    'type': 'button'
+  }
 })
 export class CdkStepperNext {
   constructor(public _stepper: CdkStepper) { }
@@ -21,7 +24,10 @@ export class CdkStepperNext {
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperPrevious]',
-  host: {'(click)': '_stepper.previous()'}
+  host: {
+    '(click)': '_stepper.previous()',
+    'type': 'button'
+  }
 })
 export class CdkStepperPrevious {
   constructor(public _stepper: CdkStepper) { }

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,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,52 @@
+<h2>Linear Vertical Stepper Demo</h2>
+<form [formGroup]="formGroup" novalidate>
+  <div formArrayName="formArray">
+    <md-vertical-stepper>
+      <md-step>
+        <div [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>Next</button>
+          </div>
+        </div>
+      </md-step>
+
+      <md-step [disabled]="!formGroup.controls.formArray.controls[0].valid">
+        <div [formGroupName]="1">
+          <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>
+        </div>
+      </md-step>
+
+      <md-step [disabled]="!formGroup.controls.formArray.controls[1].valid">
+        <ng-template mdStepLabel>Confirm your information</ng-template>
+        Everything seems correct.
+        <div>
+          <button md-button>Done</button>
+        </div>
+      </md-step>
+    </md-vertical-stepper>
+  </div>
+</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,5 @@
 import {Component} from '@angular/core';
+import {Validators, FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
   moduleId: module.id,
@@ -7,10 +8,28 @@ 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!'}
   ];
+
+  constructor(private _fb: FormBuilder) { }
+
+  ngOnInit() {
+    this.formGroup = this._fb.group({
+      formArray: this._fb.array([
+        this._fb.group({
+          firstNameFormCtrl: ['', Validators.required],
+          lastNameFormCtrl: ['', Validators.required],
+        }),
+        this._fb.group({
+          phoneFormCtrl: ['', Validators.required],
+        })
+      ])
+    });
+  }
 }

src/lib/stepper/stepper-button.ts

@@ -13,15 +13,21 @@ import {MdStepper} from './stepper';
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[mdStepperNext], button[matStepperNext]',
-  host: {'(click)': '_stepper.next()'},
+  host: {
+    '(click)': '_stepper.next()',
+    'type': 'button'
+  },
   providers: [{provide: CdkStepper, useExisting: MdStepper}]
 })
 export class MdStepperNext extends CdkStepperNext { }
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[mdStepperPrevious], button[matStepperPrevious]',
-  host: {'(click)': '_stepper.previous()'},
+  host: {
+    '(click)': '_stepper.previous()',
+    'type': 'button'
+  },
   providers: [{provide: CdkStepper, useExisting: MdStepper}]
 })
 export class MdStepperPrevious extends CdkStepperPrevious { }

src/lib/stepper/stepper.ts

@@ -15,26 +15,52 @@ 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;
   }
 }
 
-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;