diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts
index 21b944435e45..55f66fb0bc65 100644
--- a/src/cdk/stepper/stepper-button.ts
+++ b/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) {}
}
diff --git a/src/demo-app/stepper/stepper-demo.html b/src/demo-app/stepper/stepper-demo.html
index 0dd4274921ba..a4930129749f 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -15,7 +15,7 @@
Linear Vertical Stepper Demo using a single form
This field is required
-
+
@@ -28,8 +28,8 @@ Linear Vertical Stepper Demo using a single form
The input is invalid.
-
-
+
+
@@ -100,7 +100,7 @@ Vertical Stepper Demo
-
+
@@ -112,8 +112,8 @@ Vertical Stepper Demo
-
-
+
+
@@ -125,8 +125,8 @@ Vertical Stepper Demo
-
-
+
+
@@ -150,7 +150,7 @@ Horizontal Stepper Demo with Text Label
-
+
@@ -159,8 +159,8 @@ Horizontal Stepper Demo with Text Label
-
-
+
+
@@ -169,8 +169,8 @@ Horizontal Stepper Demo with Text Label
-
-
+
+
diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts
index 32fb1e821366..a055aa628b87 100644
--- a/src/lib/stepper/stepper-button.ts
+++ b/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 {}
diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts
index 5dd85b3bc260..12962d48dd7c 100644
--- a/src/lib/stepper/stepper.spec.ts
+++ b/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);
});
@@ -314,10 +322,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);
});
@@ -503,6 +519,13 @@ function assertNextStepperButtonClick(fixture: ComponentFixture) {
expect(stepperComponent.selectedIndex).toBe(2);
}
+/** Asserts that the specified type of stepper button has the given type. */
+function assertStepperButtonType(fixture: ComponentFixture, 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) {
let stepperComponent = fixture.debugElement.query(By.directive(MatStepper)).componentInstance;