Comment edits

Author: jwshinjwshin

src/cdk/stepper/stepper.ts

@@ -63,10 +63,10 @@ export class CdkStep {
   }
   private _disabled = false;
 
-  /** Whether the user has interacted with step or not. */
+  /** Whether user has seen the expanded step content or not . */
   get interacted() { return this._interacted; }
-  set interacted(value: any) {
-    this._interacted = coerceBooleanProperty(value);
+  set interacted(value: boolean) {
+    this._interacted = value;
   }
   private _interacted = false;
 

src/demo-app/stepper/stepper-demo.html

@@ -1,7 +1,7 @@
 <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>
@@ -18,7 +18,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>

src/lib/stepper/stepper.ts

@@ -54,6 +54,12 @@ export class MdStep extends CdkStep {
   /** Custom error state matcher that additionally checks for validity of interacted form. */
   errorStateMatcher = (control: FormControl, form: FormGroupDirective | NgForm) => {
     let originalErrorState = this._originalErrorStateMatcher(control, form);
+
+    /**
+     * Custom error state checks for the validity of form that is not submitted or touched
+     * since user can trigger a form change by calling for another step without directly
+     * interacting with the current form.
+     */
     let customErrorState =  control.invalid && this.interacted;
 
     return originalErrorState || customErrorState;