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;