mat-dialog-close should close the dialog with undefined value, not empty string by default

Bug, feature request, or proposal:

If a button has an mat-dialog-close attribute with no value, then clicking the button should resolve MatDialogRef.afterClosed() observable with an undefined value, not an empty string ("").

What is the expected behavior?

If a button has an mat-dialog-close attribute with no value, then clicking the button should resolve MatDialogRef.afterClosed() Observable with an undefined value.

What is the current behavior?

Currently, if a button has an mat-dialog-close attribute with no value, then clicking the button resolves MatDialogRef.afterClosed() Observable with an empty string ("").

What are the steps to reproduce?

StackBlitz: https://stackblitz.com/edit/angular-qijqgu Please see line 25 of dialog-overview-example.ts

What is the use-case or motivation for changing an existing behavior?

Empty string does not have any special meaning in terms of Javascript. An undefined value is a much more appropriate value for closing a dialog without an actual value.

Checking if the dialog result equals to an empty string seems to be weird, especially when the expected value is a number (or any other type expect string).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5.1.1, Material 5.0.0-rc.3, any OS and browser

Issue Analytics

State:
Created 6 years ago
Reactions:6
Comments:7 (3 by maintainers)

Top GitHub Comments

4reactions

meurigcommented, Mar 14, 2018

Why can’t [mat-dialog-close]=“undefined” be the default behaviour?

It works when you state it explicitly, so I don’t see how this can be a technical limitation.

Using an empty string to mean ‘nothing’ just seems wrong.

2reactions

seba161189commented, May 23, 2018

Try to save the initial value when the dialog is open so you can return if you press close. COMPONENT form: FormGroup; initSalary: number; //in close return this one constructor( private formBuilder: FormBuilder, public dialogRef: MatDialogRef<SalaryDialogComponent>, @Inject(MAT_DIALOG_DATA) private data ) {}

ngOnInit() { this.form = this.formBuilder.group({ salary: this.data ? this.data.salary : ‘’ });

this.initSalary = this.form.value.salary;

}

submit(form) { this.dialogRef.close(${form.value.salary}); }

close() { this.dialogRef.close(this.initSalary); } }

Top Results From Across the Web

Problem with a variable undefined in a mat dialog text in Angular

matDialogRef.close(this.val) is already called with the value. all you need to do is to subscribe to it on the "other component" like so....

Dialog | Angular Material

Configuration for opening a modal dialog with the MatDialog service. Properties. Name, Description. ariaDescribedBy: string | null. ID of the element that ...

mat-dialog-close not working - You.com | The AI Search ...

When I close them using the directive mat-dialog-close='false' from one the false value is return successfully but from the other I get undefined....

Routing to Angular Material Dialogs | by John Crowson | ngconf

We will base our solutions on the Angular Material Dialog documentation example, ... but it does not return to “/home” after the dialog...

Angular Material Dialog: A Complete Example

for example, we are setting disableClose to true, which means that the user will not be able to close the dialog just by...