diff --git a/src/material/dialog/dialog-content-directives.ts b/src/material/dialog/dialog-content-directives.ts index cf8cf0f2c85f..09da15cc356c 100644 --- a/src/material/dialog/dialog-content-directives.ts +++ b/src/material/dialog/dialog-content-directives.ts @@ -30,13 +30,16 @@ let dialogElementUid = 0; host: { '(click)': 'dialogRef.close(dialogResult)', '[attr.aria-label]': 'ariaLabel || null', - 'type': 'button', // Prevents accidental form submits. + '[attr.type]': 'type', } }) export class MatDialogClose implements OnInit, OnChanges { /** Screenreader label for the button. */ @Input('aria-label') ariaLabel: string; + /** Default to "button" to prevents accidental form submits. */ + @Input() type: 'submit' | 'button' | 'reset' = 'button'; + /** Dialog close input. */ @Input('mat-dialog-close') dialogResult: any; diff --git a/src/material/dialog/dialog.spec.ts b/src/material/dialog/dialog.spec.ts index bcf1c890fadd..0eac677f4440 100644 --- a/src/material/dialog/dialog.spec.ts +++ b/src/material/dialog/dialog.spec.ts @@ -1204,12 +1204,18 @@ describe('MatDialog', () => { expect(button.getAttribute('aria-label')).toBe('Best close button ever'); })); - it('should override the "type" attribute of the close button', () => { + it('should set the "type" attribute of the close button if not set manually', () => { let button = overlayContainerElement.querySelector('button[mat-dialog-close]')!; expect(button.getAttribute('type')).toBe('button'); }); + it('should not override type attribute of the close button if set manually', () => { + let button = overlayContainerElement.querySelector('button.with-submit')!; + + expect(button.getAttribute('type')).toBe('submit'); + }); + it('should return the [mat-dialog-close] result when clicking the close button', fakeAsync(() => { let afterCloseCallback = jasmine.createSpy('afterClose callback'); @@ -1557,6 +1563,7 @@ class PizzaMsg { aria-label="Best close button ever" [mat-dialog-close]="true">
Should not close
+ ` }) @@ -1575,6 +1582,7 @@ class ContentElementDialog {} aria-label="Best close button ever" [mat-dialog-close]="true">
Should not close
+ ` diff --git a/tools/public_api_guard/material/dialog.d.ts b/tools/public_api_guard/material/dialog.d.ts index 533d01d97f42..723549b4cc4d 100644 --- a/tools/public_api_guard/material/dialog.d.ts +++ b/tools/public_api_guard/material/dialog.d.ts @@ -49,6 +49,7 @@ export declare class MatDialogClose implements OnInit, OnChanges { ariaLabel: string; dialogRef: MatDialogRef; dialogResult: any; + type: 'submit' | 'button' | 'reset'; constructor(dialogRef: MatDialogRef, _elementRef: ElementRef, _dialog: MatDialog); ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void;