feat(stepper): add proper type to stepper buttons (#9401)

* Automatically adds the proper button type for the StepperPrevious and StepperNext buttons.

Author: devversion

src/cdk/stepper/stepper-button.ts

@@ -6,23 +6,35 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive} from '@angular/core';
+import {Directive, Input} from '@angular/core';
 import {CdkStepper} from './stepper';
 
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperNext]',
-  host: {'(click)': '_stepper.next()'}
+  host: {
+    '(click)': '_stepper.next()',
+    '[type]': 'type',
+  }
 })
 export class CdkStepperNext {
-  constructor(public _stepper: CdkStepper) { }
+  /** Type of the next button. Defaults to "submit" if not specified. */
+  @Input() type: string = 'submit';
+
+  constructor(public _stepper: CdkStepper) {}
 }
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperPrevious]',
-  host: {'(click)': '_stepper.previous()'}
+  host: {
+    '(click)': '_stepper.previous()',
+    '[type]': 'type',
+  }
 })
 export class CdkStepperPrevious {
-  constructor(public _stepper: CdkStepper) { }
+  /** Type of the previous button. Defaults to "button" if not specified. */
+  @Input() type: string = 'button';
+
+  constructor(public _stepper: CdkStepper) {}
 }

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

@@ -15,7 +15,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
         <mat-error>This field is required</mat-error>
       </mat-form-field>
       <div>
-        <button mat-button matStepperNext type="button">Next</button>
+        <button mat-button matStepperNext>Next</button>
       </div>
     </mat-step>
 
@@ -28,8 +28,8 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
         <mat-error>The input is invalid.</mat-error>
       </mat-form-field>
       <div>
-        <button mat-button matStepperPrevious type="button">Back</button>
-        <button mat-button matStepperNext type="button">Next</button>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
       </div>
     </mat-step>
 
@@ -102,7 +102,7 @@ <h3>Vertical Stepper Demo</h3>
       <input matInput placeholder="Last Name">
     </mat-form-field>
     <div>
-      <button mat-button matStepperNext type="button">Next</button>
+      <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
 
@@ -114,8 +114,8 @@ <h3>Vertical Stepper Demo</h3>
       <input matInput placeholder="Phone number">
     </mat-form-field>
     <div>
-      <button mat-button matStepperPrevious type="button">Back</button>
-      <button mat-button matStepperNext type="button">Next</button>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
 
@@ -127,8 +127,8 @@ <h3>Vertical Stepper Demo</h3>
       <input matInput placeholder="Address">
     </mat-form-field>
     <div>
-      <button mat-button matStepperPrevious type="button">Back</button>
-      <button mat-button matStepperNext type="button">Next</button>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
 
@@ -152,7 +152,7 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
       <input matInput placeholder="Last Name">
     </mat-form-field>
     <div>
-      <button mat-button matStepperNext type="button">Next</button>
+      <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
 
@@ -161,8 +161,8 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
       <input matInput placeholder="Phone number">
     </mat-form-field>
     <div>
-      <button mat-button matStepperPrevious type="button">Back</button>
-      <button mat-button matStepperNext type="button">Next</button>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
 
@@ -171,8 +171,8 @@ <h3>Horizontal Stepper Demo with Text Label</h3>
       <input matInput placeholder="Address">
     </mat-form-field>
     <div>
-      <button mat-button matStepperPrevious type="button">Back</button>
-      <button mat-button matStepperNext type="button">Next</button>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button matStepperNext>Next</button>
     </div>
   </mat-step>
 

src/lib/stepper/stepper-button.ts

@@ -13,15 +13,23 @@ import {MatStepper} from './stepper';
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperNext]',
-  host: {'(click)': '_stepper.next()'},
+  host: {
+    '(click)': '_stepper.next()',
+    '[type]': 'type',
+  },
+  inputs: ['type'],
   providers: [{provide: CdkStepper, useExisting: MatStepper}]
 })
-export class MatStepperNext extends CdkStepperNext { }
+export class MatStepperNext extends CdkStepperNext {}
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperPrevious]',
-  host: {'(click)': '_stepper.previous()'},
+  host: {
+    '(click)': '_stepper.previous()',
+    '[type]': 'type',
+  },
+  inputs: ['type'],
   providers: [{provide: CdkStepper, useExisting: MatStepper}]
 })
-export class MatStepperPrevious extends CdkStepperPrevious { }
+export class MatStepperPrevious extends CdkStepperPrevious {}

src/lib/stepper/stepper.spec.ts

@@ -82,10 +82,18 @@ describe('MatHorizontalStepper', () => {
       assertNextStepperButtonClick(fixture);
     });
 
+    it('should set the next stepper button type to "submit"', () => {
+      assertStepperButtonType(fixture, MatStepperNext, 'submit');
+    });
+
     it('should go to previous available step when the previous button is clicked', () => {
       assertPreviousStepperButtonClick(fixture);
     });
 
+    it('should set the previous stepper button type to "button"', () => {
+      assertStepperButtonType(fixture, MatStepperPrevious, 'button');
+    });
+
     it('should set the correct step position for animation', () => {
       assertCorrectStepAnimationDirection(fixture);
     });
@@ -318,10 +326,18 @@ describe('MatVerticalStepper', () => {
       assertNextStepperButtonClick(fixture);
     });
 
+    it('should set the next stepper button type to "submit"', () => {
+      assertStepperButtonType(fixture, MatStepperNext, 'submit');
+    });
+
     it('should go to previous available step when the previous button is clicked', () => {
       assertPreviousStepperButtonClick(fixture);
     });
 
+    it('should set the previous stepper button type to "button"', () => {
+      assertStepperButtonType(fixture, MatStepperPrevious, 'button');
+    });
+
     it('should set the correct step position for animation', () => {
       assertCorrectStepAnimationDirection(fixture);
     });
@@ -511,6 +527,13 @@ function assertNextStepperButtonClick(fixture: ComponentFixture<any>) {
   expect(stepperComponent.selectedIndex).toBe(2);
 }
 
+/** Asserts that the specified type of stepper button has the given type. */
+function assertStepperButtonType(fixture: ComponentFixture<any>, stepperClass: any, type: string) {
+  const buttonElement = fixture.debugElement.query(By.directive(stepperClass)).nativeElement;
+
+  expect(buttonElement.type).toBe(type, `Expected the button to have "${type}" set as type.`);
+}
+
 /** Asserts that clicking on MatStepperPrevious button updates `selectedIndex` correctly. */
 function assertPreviousStepperButtonClick(fixture: ComponentFixture<any>) {
   let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;