Mat Dialog: beforeClosed() should have an option to cancel

[knoefel]

Bug, feature request, or proposal:

Feature Request

What is the expected behavior?

It should be possible to cancel the close event.

What is the current behavior?

It is not possible to cancel the close event.

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

Use-case: Dialog with Form Model which will be sent to the server. So for example, the result of the this server call is an error, which should be displayed inside the dialog and prevent it from closing. Right now, this is only possible if I put the logic (store or service calls) inside the dialog component. This isn’t following the dumb and smart components pattern, where the logic should be put inside the container component.

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

Angular 7, Angular Material 7

Is there anything else we should know?

[juristr]

👍 Also if you have a form inside a dialog and you'd like to cancel the closing of the dialog based on whether the form is dirty or not. A bit the use case of the CanDeactivate on the router.

[juristr]

I'd like to provide a PR for this if that's desired. I'd implement this on the cdk-experimental Dialog.

My proposal would be to add a canClose function to the DialogRef. Inside a Dialog one gets the DialogRef injected and could hook on the function onto it, like

import { DialogRef } from '@angular/cdk-experimental/dialog';
...
@Component({...}
export class SomeDialog {

    constructor(private dialogRef: DialogRef<any>) {
        this.dialogRef.canClose = (/* pass some data? */) => {
           // decide whether the dialog can be closed based
           // on the current state of SomeDialog component here.
           // if it can be closed, return true, otherwise false
        }
    }

}

On the other side, in the DialogRef implementation here: https://github.com/angular/material2/blob/master/src/cdk-experimental/dialog/dialog-ref.ts#L72-L74

...the current logic could be altered to verify whether such canClose function exists, and if so invoke it.

What do you think? Let me know if this could be a valid option and I'll provide an according PR.

[dneukirchen]

+1

[mikeandtherest]

+1. Any news about this?

[matze1234]

+1
I'd like to wait with closing the dialog until it's output has been successfully stored in the backend.

[pionnegru]

My workaround was to subscribe to a rxjs Subject in OnInit hook of the dialog to execute close(). subject.next() then will be fired once the whatever operation is complete

[szabolcssimonyi]

+1

[marty30]

Any news on this? I would love to implement a generic way to prevent closing a dialog containing a dirty form. This would be similar to the unload event when you close the browser.

[szabolcssimonyi]

@marty30 not that clean way, but I try to workaround with something like this:

  constructor(
    @Inject(MAT_DIALOG_DATA) public data: { type: string, id?: number },
    private dialogRef: MatDialogRef<GameBaseComponent>) {
  }

  ngOnInit(): void {
    this.dialogRef.disableClose = true;
    this.dialogRef.backdropClick().subscribe(async () => await this.safeClose());
    this.createForm();
  }

  public async safeClose(result?: string): Promise<void> {
    if (!this.form.touched && !this.form.dirty) {
      this.dialogRef.close();
      return;
    }
    const confirmResult = await this.pageService.confirm({ ...  }).afterClosed().toPromise();
    if (!Boolean(confirmResult)) {
      return;
    }
    this.dialogRef.close(result);
  }

and I change mat-dialog-close with (click)='safeClose()' everywhere in the template too
Anybody has better solution?

[Krivobarac]

Solution for close dialog conditionally.
disable close = true;

closeDialog() { if (this.profile.form.dirty && confirm('You have unsaved changes! Are you sure you want to continue?')) { this.dialogRef.close(); } }

this.dialogRef.keydownEvents().subscribe(key => { if (key.code === 'Escape') { this.closeDialog(); } });

[janpauldahlke]

just landed here. interesting read, still open. i bump and will implemented suggestion in the meantime.

[bnohad]

after reading the question again - i found out my solutions is not right for this case (SOLUTION 1) - please see SOLUTION 2

SOLUTION 2 - SUBMIT BUTTON SHOULDN'T CLOSE DIALOG BEFORE VALIDATING
if you'd like to know if submit was pressed but not close the dialog until some outer validations occur - then you should add a new event emitter to you costume dialog as such:

export class MyDialogComponent {
    @Output() onSubmit: EventEmitter<any> = new EventEmitter<any>();

    constructor(private _dialogRef: MatDialogRef,
              @Inject(MAT_DIALOG_DATA) private _dialogData) {
    }
    
    submitButtonClick() { // this function should be called in the template on `click`
       this.onSubmit.emit(<IF VALUE NEEDED IN THE SUBSCRIBER - PUT HERE>);
    }
}

then you can subscribe to that event, perform your validation & close the dialog if necessary like so:

export class MyPage {
   constructor(public dialog: MatDialog) {}
...
   openMyDialog() {
       const dRef = this.dialog.open(MyDialogComponent);
       dRef.componentInstance.onSubmit.subscribe(() => {
          // DO YOUR VALIDATION HERE
         ...
         // IF VALID THEN CLOSE
         dRef.close();
       });

   }
}

or from the template with

<my-dialog (onSubmit)="validateInput()"></my-dialog>

---

SOLUTION 1 - WHEN CALLING CLOSE, PERFORM SOME INNER VALIDATION IN THE DIALOG
we had this issue as well - the workaround we implemented is fairly simple - just hijack the original close function like so:

export class MyDialogComponent {
    private _originalClose: Function;

    constructor(private _dialogRef: MatDialogRef,
              @Inject(MAT_DIALOG_DATA) private _dialogData) {
       this._originalClose = this._dialogRef.close;
       this._dialogRef.close = this.closeDialog.bind(this);
    }
    
    closeDialog() {
       // DO YOUR VALIDATION LOGIC HERE
       ...
       // CALL ORIGINAL CLOSE FUNCTION IF VALIDATION PASSED
       this._originalClose.bind(this._dialogRef)();
    }
}

this way all of the consumers can call the original close function without being aware of the internal MyDialog API or closeFunction :)