Add 'valid' to MdStep for form validation

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -55,20 +55,23 @@ export class CdkStep {
   /** Template for step content. */
   @ViewChild(TemplateRef) content: TemplateRef<any>;
 
-  /** Whether step is disabled or not. */
+  // /** Whether step is disabled or not. */
+  // @Input()
+  // get disabled() { return this._disabled; }
+  // set disabled(value: any) {
+  //   this._disabled = coerceBooleanProperty(value);
+  // }
+  // private _disabled = false;
+
   @Input()
-  get disabled() { return this._disabled; }
-  set disabled(value: any) {
-    this._disabled = coerceBooleanProperty(value);
+  get valid() { return this._valid; }
+  set valid(value: any) {
+    this._valid = coerceBooleanProperty(value);
   }
-  private _disabled = false;
+  private _valid = true;
 
   /** Whether user has seen the expanded step content or not . */
-  get interacted() { return this._interacted; }
-  set interacted(value: boolean) {
-    this._interacted = value;
-  }
-  private _interacted = false;
+  interacted = false;
 
   /** Label of the step. */
   @Input()
@@ -101,7 +104,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].valid) { return; }
+    }
+    if (this._selectedIndex != index) {
       this._emitStepperSelectionEvent(index);
       this._focusStep(this._selectedIndex);
     }

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

@@ -1,6 +1,6 @@
 <h2>Linear Vertical Stepper Demo</h2>
 <md-vertical-stepper>
-  <md-step>
+  <md-step [valid]="nameFormGroup.valid">
     <form [formGroup]="nameFormGroup">
       <ng-template mdStepLabel>Fill out your name</ng-template>
       <md-input-container>
@@ -17,13 +17,13 @@ <h2>Linear Vertical Stepper Demo</h2>
     </form>
   </md-step>
 
-  <md-step [disabled]="!nameFormGroup.valid">
+  <md-step [valid]="phoneFormGroup.valid">
     <form [formGroup]="phoneFormGroup">
       <ng-template mdStepLabel>
         <div>Fill out your phone number</div>
       </ng-template>
       <md-input-container>
-        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl" required>
+        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl">
         <md-error>This field is required</md-error>
       </md-input-container>
       <div>
@@ -33,7 +33,7 @@ <h2>Linear Vertical Stepper Demo</h2>
     </form>
   </md-step>
 
-  <md-step [disabled]="!phoneFormGroup.valid">
+  <md-step>
     <form>
       <ng-template mdStepLabel>Confirm your information</ng-template>
       Everything seems correct.

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

@@ -25,7 +25,7 @@ export class StepperDemo {
     });
 
     this.phoneFormGroup = new FormGroup({
-      phoneFormCtrl: new FormControl('', Validators.required)
+      phoneFormCtrl: new FormControl('')
     });
   }
 }