feat(stepper): Add support for linear stepper #2 - each step as its o…

…wn form. (#6117) * Add form control - consider each step as its own form group * Comment edits * Add 'valid' to MdStep for form validation * Add [stepControl] to each step based on merging * Changes based on review
angular · Aug 16, 2017 · 6ce8b9f · 6ce8b9f
1 parent 39a3649
commit 6ce8b9f
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 31 deletions.
diff --git 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.valid) {
-          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
@@ -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 a single form</h3>
 <form [formGroup]="formGroup">
   <md-vertical-stepper formArrayName="formArray" [linear]="!isNonLinear">
     <md-step formGroupName="0" [stepControl]="formArray.get([0])">
@@ -42,19 +43,63 @@ <h2>Linear Vertical Stepper Demo</h2>
   </md-vertical-stepper>
 </form>
 
-<h2>Vertical Stepper Demo</h2>
+<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-form-field>
+        <input mdInput placeholder="First Name" formControlName="firstNameCtrl" required>
+        <md-error>This field is required</md-error>
+      </md-form-field>
+      <md-form-field>
+        <input mdInput placeholder="Last Name" formControlName="lastNameCtrl" required>
+        <md-error>This field is required</md-error>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperNext>Next</button>
+      </div>
+    </form>
+  </md-step>
+
+  <md-step [stepControl]="phoneFormGroup">
+    <form [formGroup]="phoneFormGroup">
+      <ng-template mdStepLabel>Fill out your phone number</ng-template>
+      <md-form-field>
+        <input mdInput placeholder="Phone number" formControlName="phoneCtrl" required>
+        <md-error>This field is required</md-error>
+      </md-form-field>
+      <div>
+        <button md-button mdStepperPrevious>Back</button>
+        <button md-button mdStepperNext>Next</button>
+      </div>
+    </form>
+  </md-step>
+
+  <md-step>
+    <form>
+      <ng-template mdStepLabel>Confirm your information</ng-template>
+      Everything seems correct.
+      <div>
+        <button md-button>Done</button>
+      </div>
+    </form>
+  </md-step>
+</md-horizontal-stepper>
+
+<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>
@@ -64,10 +109,10 @@ <h2>Vertical Stepper Demo</h2>
     <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>
@@ -78,10 +123,10 @@ <h2>Vertical Stepper Demo</h2>
     <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>
@@ -97,19 +142,19 @@ <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>
-    <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>
@@ -119,10 +164,10 @@ <h2>Horizontal Stepper Demo</h2>
     <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>
@@ -133,10 +178,10 @@ <h2>Horizontal Stepper Demo</h2>
     <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>
@@ -152,26 +197,26 @@ <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>
+    <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>
     </div>
   </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>
-    <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
@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Validators, FormBuilder, FormGroup} from '@angular/forms';
+import {FormBuilder, 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'},
@@ -35,5 +38,14 @@ export class StepperDemo {
         })
       ])
     });
+
+    this.nameFormGroup = this._formBuilder.group({
+      firstNameCtrl: ['', Validators.required],
+      lastNameCtrl: ['', Validators.required],
+    });
+
+    this.phoneFormGroup = this._formBuilder.group({
+      phoneCtrl: ['', Validators.required]
+    });
   }
 }