Angular 6 MatDialog cancel close event

Question

I have two components: CustomerComponent and CustomerCreateUpdateComponent.

CustomerComponent includes data table of customers. CustomerCreateUpdateComponent is a form with input controls for create/update.

I have mat-dialog with CustomerCreateUpdateComponent in it. After opening the dialog and filling the form, I click submit button and this.dialogRef.close(customer); is executed. customer object has all values.

In CustomerComponent I've subscribe on this.dialog.open(CustomerCreateUpdateComponent).beforeClose().subscribe((customer: Customer) => { ... });

It's beforeClose() method, so until the dialog is closed, I get back customer object back and POST it to api.

If POST is successful everything is OK, the dialog is closed and data table updated.

BUT, if POST did not succeed, api will return an error, which I want to show to the user and KEEP THE DIALOG OPEN, something like if(error) { closeEvent.cancel() }

I've seen the whole documentation for mat-dialog, nothing helpful. I'm almost sure there is not way to do it.

Maybe someone had the same issue? Will be glad to hear any workaround.

Answer 1

I solved a similar issue because I wanted a confirm-close warning to pop up before closing, and then to cancel or delay the close until it was confirmed. To handle this, I set the disableClose option to true on the dialog. I added my close method hook to the backdropClick hook so that it behaved in a similar way.

this.dialogRef.backdropClick().subscribe(() => { this.close(); });

close() is my method for handling close events on the dialog. That simply opens a confirmation box and closes if the answer is yes

close() {
    this.confirm.open({ title: 'Would you like to acknowledge this message?' }).pipe(
      tap(answer => { if (answer === true) { this.dialogRef.close(); } }),
    ).subscribe();
}

Adding a cancel callback to the close hooks is only a convenience which is probably why they haven't done it right already.

Answer 2

I was in the same trouble, and find some 'solution'. As I understood you can't prevent the close event of the dialog so I tried to find some alternative way.

Firstly, I have removed [mat-dialog-close]="..." cdkFocusInitial from the call of OK button like this.

<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">No Thanks</button>
  <button mat-button (click)="clickOn()">Ok</button>
</div>

after it, I have passed that service object to the component of the dialog, and make that POST call from the component of the dialog, and if all is OK now I am call dialogRef.close(...callbackResull...) otherwise I don't close dialogRef and do all that I need in Dialog-component, as a result I have.

    clickOn() {
        <Your POST call which returns observable>.subscribe(() => {
              this.dialogRef.close(this.selfRequest);
            },
            error1 => {
              // Do here what you need
            });
        }
    }