Implement @input() stepControl for each step

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -25,6 +25,7 @@ import {
 import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keyboard';
 import {CdkStepLabel} from './step-label';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {AbstractControl} from '@angular/forms';
 
 /** Used to generate unique ID for each stepper component. */
 let nextId = 0;
@@ -55,14 +56,13 @@ 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. */
+  /** The top level abstract control of the step. */
   @Input()
-  get disabled() { return this._disabled; }
-  set disabled(value: any) {
-    this._disabled = coerceBooleanProperty(value);
+  get stepControl() { return this._stepControl; }
+  set stepControl(control: AbstractControl) {
+    this._stepControl = control;
   }
-  private _disabled = false;
+  private _stepControl: AbstractControl;
 
   /** Whether user has seen the expanded step content or not . */
   interacted = false;
@@ -98,7 +98,10 @@ export class CdkStepper {
   get selectedIndex() { return this._selectedIndex; }
   set selectedIndex(index: number) {
     this._steps.toArray()[this._selectedIndex].interacted = true;
-    if (this._selectedIndex != index && !this._steps.toArray()[index].disabled) {
+    for (let i = 0; i < index; i++) {
+      if (!this._steps.toArray()[i].stepControl.valid) { return; }
+    }
+    if (this._selectedIndex != index) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
     }

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

@@ -1,7 +1,7 @@
 <h2>Linear Vertical Stepper Demo</h2>
 <form [formGroup]="formGroup">
   <md-vertical-stepper formArrayName="formArray">
-    <md-step formGroupName="0">
+    <md-step formGroupName="0" [stepControl]="formArray.get([0])">
       <ng-template mdStepLabel>Fill out your name</ng-template>
       <md-input-container>
         <input mdInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
@@ -17,9 +17,7 @@ <h2>Linear Vertical Stepper Demo</h2>
       </div>
     </md-step>
 
-    <md-step formGroupName="1"
-             [disabled]="formArray.hasError('invalid step') ?
-             formArray.getError('invalid step').index <= 1 : false">
+    <md-step formGroupName="1" [stepControl]="formArray.get([1])">
       <ng-template mdStepLabel>
         <div>Fill out your phone number</div>
       </ng-template>
@@ -33,9 +31,7 @@ <h2>Linear Vertical Stepper Demo</h2>
       </div>
     </md-step>
 
-    <md-step
-        [disabled]="formArray.hasError('invalid step') ?
-        formArray.getError('invalid step').index <= 2 : false">
+    <md-step>
       <ng-template mdStepLabel>Confirm your information</ng-template>
       Everything seems correct.
       <div>

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

@@ -33,7 +33,7 @@ export class StepperDemo {
         this._formBuilder.group({
           phoneFormCtrl: [''],
         })
-      ], stepValidator)
+      ])
     });
   }
 }

src/lib/stepper/stepper.ts

@@ -33,19 +33,6 @@ import {
   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.