From 4db843d5269502c2c8efa0555b8dcbee1833d51e Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Fri, 28 Jul 2017 09:57:45 -0700
Subject: [PATCH 1/5] Add form control - consider each step as its own form
 group

---
 src/demo-app/stepper/stepper-demo.html | 46 ++++++++++++++++++++++++++
 src/demo-app/stepper/stepper-demo.ts   | 21 ++++++++++--
 2 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index f394b0de8a24..11d9242718f4 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -42,6 +42,52 @@ <h2>Linear Vertical Stepper Demo</h2>
   </md-vertical-stepper>
 </form>
 
+<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>Vertical Stepper Demo</h2>
 <md-vertical-stepper>
   <md-step>
diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/demo-app/stepper/stepper-demo.ts
index cc0bc6673215..25a48f075649 100644
--- a/src/demo-app/stepper/stepper-demo.ts
+++ b/src/demo-app/stepper/stepper-demo.ts
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Validators, FormBuilder, FormGroup} from '@angular/forms';
+import {FormBuilder, FormControl, FormGroup, Validators} from '@angular/forms';
 
 @Component({
   moduleId: module.id,
@@ -11,6 +11,9 @@ export class StepperDemo {
   formGroup: FormGroup;
   isNonLinear = false;
 
+  nameFormGroup: FormGroup;
+  phoneFormGroup: FormGroup;
+
   steps = [
     {label: 'Confirm your name', content: 'Last name, First name.'},
     {label: 'Confirm your contact information', content: '123-456-7890'},
@@ -19,9 +22,12 @@ export class StepperDemo {
   ];
 
   /** Returns a FormArray with the name 'formArray'. */
-  get formArray() { return this.formGroup.get('formArray'); }
+  get formArray() {
+    return this.formGroup.get('formArray');
+  }
 
-  constructor(private _formBuilder: FormBuilder) { }
+  constructor(private _formBuilder: FormBuilder) {
+  }
 
   ngOnInit() {
     this.formGroup = this._formBuilder.group({
@@ -35,5 +41,14 @@ export class StepperDemo {
         })
       ])
     });
+
+    this.nameFormGroup = new FormGroup({
+      firstNameFormCtrl: new FormControl('', Validators.required),
+      lastNameFormCtrl: new FormControl('', Validators.required)
+    });
+
+    this.phoneFormGroup = new FormGroup({
+      phoneFormCtrl: new FormControl('', Validators.required)
+    });
   }
 }

From c33e00e6ec84bad7917f3a491d2858b8118a3510 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Fri, 28 Jul 2017 16:01:51 -0700
Subject: [PATCH 2/5] Comment edits

---
 src/demo-app/stepper/stepper-demo.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 11d9242718f4..4990ffc84a65 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -45,7 +45,7 @@ <h2>Linear Vertical Stepper Demo</h2>
 <h2>Linear Vertical Stepper Demo</h2>
 <md-vertical-stepper>
   <md-step>
-    <form [formGroup]="nameFormGroup" novalidate>
+    <form [formGroup]="nameFormGroup">
       <ng-template mdStepLabel>Fill out your name</ng-template>
       <md-input-container>
         <input mdInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
@@ -62,7 +62,7 @@ <h2>Linear Vertical Stepper Demo</h2>
   </md-step>
 
   <md-step [disabled]="!nameFormGroup.valid">
-    <form [formGroup]="phoneFormGroup" novalidate>
+    <form [formGroup]="phoneFormGroup">
       <ng-template mdStepLabel>
         <div>Fill out your phone number</div>
       </ng-template>

From 00bbb238fb67cc8fff2d46656fec3f1dfe351710 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Thu, 3 Aug 2017 11:25:30 -0700
Subject: [PATCH 3/5] Add 'valid' to MdStep for form validation

---
 src/demo-app/stepper/stepper-demo.html | 8 ++++----
 src/demo-app/stepper/stepper-demo.ts   | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 4990ffc84a65..56f4add44b54 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -44,7 +44,7 @@ <h2>Linear Vertical Stepper Demo</h2>
 
 <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>
@@ -61,13 +61,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>
@@ -77,7 +77,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.
diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/demo-app/stepper/stepper-demo.ts
index 25a48f075649..b9d0aba261be 100644
--- a/src/demo-app/stepper/stepper-demo.ts
+++ b/src/demo-app/stepper/stepper-demo.ts
@@ -48,7 +48,7 @@ export class StepperDemo {
     });
 
     this.phoneFormGroup = new FormGroup({
-      phoneFormCtrl: new FormControl('', Validators.required)
+      phoneFormCtrl: new FormControl('')
     });
   }
 }

From 127789b07f46691ce2ae6b30310456585c3b2f5b Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Tue, 8 Aug 2017 15:02:31 -0700
Subject: [PATCH 4/5] Add [stepControl] to each step based on merging

---
 src/cdk/stepper/stepper.ts             |  2 +-
 src/demo-app/stepper/stepper-demo.html | 31 +++++++++++++-------------
 src/demo-app/stepper/stepper-demo.ts   | 13 +++++------
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index 807369e1f87d..3e33a1bd5c51 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/src/cdk/stepper/stepper.ts
@@ -209,7 +209,7 @@ export class CdkStepper {
     stepsArray[this._selectedIndex].interacted = true;
     if (this._linear) {
       for (let i = 0; i < index; i++) {
-        if (!stepsArray[i].stepControl.valid) {
+        if (stepsArray[i].stepControl.invalid) {
           return true;
         }
       }
diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 56f4add44b54..88c98fe76762 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -1,5 +1,6 @@
-<h2>Linear Vertical Stepper Demo</h2>
 <md-checkbox [(ngModel)]="isNonLinear">Disable linear mode</md-checkbox>
+
+<h3>Linear Vertical Stepper Demo using FormArray</h3>
 <form [formGroup]="formGroup">
   <md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
     <md-step formGroupName="0" [stepControl]="formArray.get([0])">
@@ -42,17 +43,17 @@ <h2>Linear Vertical Stepper Demo</h2>
   </md-vertical-stepper>
 </form>
 
-<h2>Linear Vertical Stepper Demo</h2>
-<md-vertical-stepper>
-  <md-step [valid]="nameFormGroup.valid">
+<h3>Linear Horizontal Stepper Demo using multiple FormGroups</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>
-        <input mdInput placeholder="First Name" formControlName="firstNameFormCtrl" required>
+        <input mdInput placeholder="First Name" formControlName="firstNameCtrl" required>
         <md-error>This field is required</md-error>
       </md-input-container>
       <md-input-container>
-        <input mdInput placeholder="Last Name" formControlName="lastNameFormCtrl" required>
+        <input mdInput placeholder="Last Name" formControlName="lastNameCtrl" required>
         <md-error>This field is required</md-error>
       </md-input-container>
       <div>
@@ -61,13 +62,11 @@ <h2>Linear Vertical Stepper Demo</h2>
     </form>
   </md-step>
 
-  <md-step [valid]="phoneFormGroup.valid">
+  <md-step [stepControl]="phoneFormGroup">
     <form [formGroup]="phoneFormGroup">
-      <ng-template mdStepLabel>
-        <div>Fill out your phone number</div>
-      </ng-template>
+      <ng-template mdStepLabel>Fill out your phone number</ng-template>
       <md-input-container>
-        <input mdInput placeholder="Phone number" formControlName="phoneFormCtrl">
+        <input mdInput placeholder="Phone number" formControlName="phoneCtrl">
         <md-error>This field is required</md-error>
       </md-input-container>
       <div>
@@ -86,9 +85,9 @@ <h2>Linear Vertical Stepper Demo</h2>
       </div>
     </form>
   </md-step>
-</md-vertical-stepper>
+</md-horizontal-stepper>
 
-<h2>Vertical Stepper Demo</h2>
+<h3>Vertical Stepper Demo</h3>
 <md-vertical-stepper>
   <md-step>
     <ng-template mdStepLabel>Fill out your name</ng-template>
@@ -143,7 +142,7 @@ <h2>Vertical Stepper Demo</h2>
   </md-step>
 </md-vertical-stepper>
 
-<h2>Horizontal Stepper Demo</h2>
+<h3>Horizontal Stepper Demo</h3>
 <md-horizontal-stepper>
   <md-step>
     <ng-template mdStepLabel>Fill out your name</ng-template>
@@ -198,7 +197,7 @@ <h2>Horizontal Stepper Demo</h2>
   </md-step>
 </md-horizontal-stepper>
 
-<h2>Horizontal Stepper Demo</h2>
+<h3>Horizontal Stepper Demo</h3>
 <md-horizontal-stepper>
   <md-step *ngFor="let step of steps" [label]="step.label">
     <md-input-container>
@@ -211,7 +210,7 @@ <h2>Horizontal Stepper Demo</h2>
   </md-step>
 </md-horizontal-stepper>
 
-<h2>Horizontal Stepper Demo with Templated Label</h2>
+<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>
diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/demo-app/stepper/stepper-demo.ts
index b9d0aba261be..bd0327f69d50 100644
--- a/src/demo-app/stepper/stepper-demo.ts
+++ b/src/demo-app/stepper/stepper-demo.ts
@@ -22,12 +22,9 @@ export class StepperDemo {
   ];
 
   /** Returns a FormArray with the name 'formArray'. */
-  get formArray() {
-    return this.formGroup.get('formArray');
-  }
+  get formArray() { return this.formGroup.get('formArray'); }
 
-  constructor(private _formBuilder: FormBuilder) {
-  }
+  constructor(private _formBuilder: FormBuilder) { }
 
   ngOnInit() {
     this.formGroup = this._formBuilder.group({
@@ -43,12 +40,12 @@ export class StepperDemo {
     });
 
     this.nameFormGroup = new FormGroup({
-      firstNameFormCtrl: new FormControl('', Validators.required),
-      lastNameFormCtrl: new FormControl('', Validators.required)
+      firstNameCtrl: new FormControl('', Validators.required),
+      lastNameCtrl: new FormControl('', Validators.required)
     });
 
     this.phoneFormGroup = new FormGroup({
-      phoneFormCtrl: new FormControl('')
+      phoneCtrl: new FormControl('')
     });
   }
 }

From 28f4ceb36f3c94d660384ec2a314a46d50c0cc90 Mon Sep 17 00:00:00 2001
From: Ji Won Shin <jwshin@google.com>
Date: Tue, 15 Aug 2017 18:14:49 -0700
Subject: [PATCH 5/5] Changes based on review

---
 src/cdk/stepper/stepper.ts             |  6 +--
 src/demo-app/stepper/stepper-demo.html | 58 +++++++++++++-------------
 src/demo-app/stepper/stepper-demo.ts   | 12 +++---
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts
index 3e33a1bd5c51..9bb879647d7e 100644
--- a/src/cdk/stepper/stepper.ts
+++ b/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;
   }
diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 88c98fe76762..70dd6ab6b81b 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/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>
-        <input mdInput placeholder="Phone number" formControlName="phoneCtrl">
+      <md-form-field>
+        <input mdInput placeholder="Phone number" formControlName="phoneCtrl" required>
         <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>
diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/demo-app/stepper/stepper-demo.ts
index bd0327f69d50..c4f546f0dfed 100644
--- a/src/demo-app/stepper/stepper-demo.ts
+++ b/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]
     });
   }
 }