Changes based on review

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -208,11 +208,7 @@ export class CdkStepper {
     const stepsArray = this._steps.toArray();
     stepsArray[this._selectedIndex].interacted = true;
     if (this._linear) {
-      for (let i = 0; i < index; i++) {
-        if (stepsArray[i].stepControl.invalid) {
-          return true;
-        }
-      }
+      return stepsArray.slice(0, index).some(step => step.stepControl.invalid);
     }
     return false;
   }

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

@@ -1,6 +1,6 @@
 <md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
 
-<h3>Linear Vertical Stepper Demo using FormArray</h3>
+<h3>Linear Vertical Stepper Demo using a single form</h3>
 <form [formGroup]="formGroup">
   <md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
     <md-step formGroupName="0" [stepControl]="formArray.get([0])">
@@ -43,19 +43,19 @@ <h3>Linear Vertical Stepper Demo using FormArray</h3>
   </md-vertical-stepper>
 </form>
 
-<h3>Linear Horizontal Stepper Demo using multiple FormGroups</h3>
+<h3>Linear Horizontal Stepper Demo using a different form for each step</h3>
 <md-horizontal-stepper [linear]="!isNonLinear">
   <md-step [stepControl]="nameFormGroup">
     <form [formGroup]="nameFormGroup">
       <ng-template mdStepLabel>Fill out your name</ng-template>
-      <md-input-container>
+      <md-form-field>
         <input mdInput placeholder="First Name" formControlName="firstNameCtrl" required>
         <md-error>This field is required</md-error>
-      </md-input-container>
-      <md-input-container>
+      </md-form-field>
+      <md-form-field>
         <input mdInput placeholder="Last Name" formControlName="lastNameCtrl" required>
         <md-error>This field is required</md-error>
-      </md-input-container>
+      </md-form-field>
       <div>
         <button md-button mdStepperNext>Next</button>
       </div>
@@ -65,10 +65,10 @@ <h3>Linear Horizontal Stepper Demo using multiple FormGroups</h3>
   <md-step [stepControl]="phoneFormGroup">
     <form [formGroup]="phoneFormGroup">
       <ng-template mdStepLabel>Fill out your phone number</ng-template>
-      <md-input-container>
+      <md-form-field>
         <input mdInput placeholder="Phone number" formControlName="phoneCtrl">
         <md-error>This field is required</md-error>
-      </md-input-container>
+      </md-form-field>
       <div>
         <button md-button mdStepperPrevious>Back</button>
         <button md-button mdStepperNext>Next</button>
@@ -91,15 +91,15 @@ <h3>Vertical Stepper Demo</h3>
 <md-vertical-stepper>
   <md-step>
     <ng-template mdStepLabel>Fill out your name</ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="First Name">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
 
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Last Name">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperNext type="button">Next</button>
     </div>
@@ -109,10 +109,10 @@ <h3>Vertical Stepper Demo</h3>
     <ng-template mdStepLabel>
       <div>Fill out your phone number</div>
     </ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Phone number">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
       <button md-button mdStepperNext type="button">Next</button>
@@ -123,10 +123,10 @@ <h3>Vertical Stepper Demo</h3>
     <ng-template mdStepLabel>
       <div>Fill out your address</div>
     </ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Address">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
       <button md-button mdStepperNext type="button">Next</button>
@@ -146,15 +146,15 @@ <h3>Horizontal Stepper Demo</h3>
 <md-horizontal-stepper>
   <md-step>
     <ng-template mdStepLabel>Fill out your name</ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="First Name">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
 
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Last Name">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperNext type="button">Next</button>
     </div>
@@ -164,10 +164,10 @@ <h3>Horizontal Stepper Demo</h3>
     <ng-template mdStepLabel>
       <div>Fill out your phone number</div>
     </ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Phone number">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
       <button md-button mdStepperNext type="button">Next</button>
@@ -178,10 +178,10 @@ <h3>Horizontal Stepper Demo</h3>
     <ng-template mdStepLabel>
       <div>Fill out your address</div>
     </ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Address">
       <md-error>This field is required</md-error>
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperPrevious type="button">Back</button>
       <button md-button mdStepperNext type="button">Next</button>
@@ -200,9 +200,9 @@ <h3>Horizontal Stepper Demo</h3>
 <h3>Horizontal Stepper Demo</h3>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps" [label]="step.label">
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Answer" [(ngModel)]="step.content">
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperPrevious>Back</button>
       <button md-button mdStepperNext>Next</button>
@@ -214,9 +214,9 @@ <h3>Horizontal Stepper Demo with Templated Label</h3>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps">
     <ng-template mdStepLabel>{{step.label}}</ng-template>
-    <md-input-container>
+    <md-form-field>
       <input mdInput placeholder="Answer" [(ngModel)]="step.content">
-    </md-input-container>
+    </md-form-field>
     <div>
       <button md-button mdStepperPrevious>Back</button>
       <button md-button mdStepperNext>Next</button>

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

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   moduleId: module.id,
@@ -39,13 +39,13 @@ export class StepperDemo {
       ])
     });
 
-    this.nameFormGroup = new FormGroup({
-      firstNameCtrl: new FormControl('', Validators.required),
-      lastNameCtrl: new FormControl('', Validators.required)
+    this.nameFormGroup = this._formBuilder.group({
+      firstNameCtrl: ['', Validators.required],
+      lastNameCtrl: ['', Validators.required],
     });
 
-    this.phoneFormGroup = new FormGroup({
-      phoneCtrl: new FormControl('')
+    this.phoneFormGroup = this._formBuilder.group({
+      phoneCtrl: ['', Validators.required]
     });
   }
 }