diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts
index 21b944435e4..55f66fb0bc6 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 244f47772e7..cd81828ebfc 100644
--- a/src/demo-app/stepper/stepper-demo.html
+++ b/src/demo-app/stepper/stepper-demo.html
@@ -15,7 +15,7 @@
This field is required
-
+
@@ -28,8 +28,8 @@
The input is invalid.
-
-
+
+
@@ -102,7 +102,7 @@
-
+
@@ -114,8 +114,8 @@
-
-
+
+
@@ -127,8 +127,8 @@
-
-
+
+
@@ -152,7 +152,7 @@
-
+
@@ -161,8 +161,8 @@
-
-
+
+
@@ -171,8 +171,8 @@
-
-
+
+
diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts
index 32fb1e82136..a055aa628b8 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 a533d15336d..87212caafd7 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);
});
@@ -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) {
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;