Add 'valid' to MdStep for form validation

angular · Aug 14, 2017 · dc3586e · dc3586e
1 parent a42f2d9
commit dc3586e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git 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
@@ -48,7 +48,7 @@ export class StepperDemo {
     });
 
     this.phoneFormGroup = new FormGroup({
-      phoneFormCtrl: new FormControl('', Validators.required)
+      phoneFormCtrl: new FormControl('')
     });
   }
 }