Add form control - consider each step as its own form group

Author: jwshinjwshin

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>

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)
+    });
   }
 }