Add [stepControl] to each step based on merging

Author: jwshinjwshin

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

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>

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('')
     });
   }
 }