feature(modal): Hook to prevent dismissal

[christarczon]

I'd like a way to be notified when the user attempts to dismiss the modal using the Escape key or by clicking the backdrop. The use case is that they've filled in a form in the modal and I need to confirm they want to lose their changes.

My initial thought would be to add a beforeDismiss callback in NgbModalOptions that can return false to prevent the dismiss event. I can work on a PR if this sounds plausible.

[pkozlowski-opensource]

Yeh, I understand the use-case and it is valid. I'm not sure about the proposed API, though. Could you think of other alternatives and comment back here?

[intellix]

Maybe copy Router API for CanDeactivate? https://angular.io/docs/ts/latest/guide/router.html#!#can-deactivate-guard

Currently for our ui-router ng1 products, we have routes for Modals. If you go to /login then during the onEnter function we're opening the modal.
onExit of the route will close the modal.

I guess routing doesn't have to have anything to do with modals but just saying it works via routing at least :)

[JWess]

@christarczon I have the exact same use-case: I have a form in a modal and I need to confirm they want to lose their changes, but I only want to show the confirmation if the form is dirty. Since beforeDismiss() must be supplied via the modal config, I can't think of any way of knowing if the form is dirty or not. Did you solve this problem?

[christarczon]

@JWess I can't believe this was a year ago! No I never implemented with beforeDismiss, our design was changed.

Disclaimer: Haven't tested this, it's mostly off the top of my head

You'll need to have a reference to the form using ViewChild.

<form #modalForm="ngForm">

@ViewChild('modalForm')
modalForm: NgForm;

Modal from template:
this.modal.open(template, {
beforeDismiss: () => {
if (this.modalForm.dirty) {
return confirm('Do you want to lose your changes?');
}
}
});

Modal from component:
const modalRef = this.modal.open(MyComponent, {
beforeDismiss: () => {
if (modalRef.componentInstance.modalForm.dirty) {
return confirm('Do you want to lose your changes?');
}
}
});

If you don't want to use the native confirm() you'll have to always return false then manually close the modal if they say OK.

[JWess]

Awesome suggestion...really appreciate it! The only problem I have left is I end up with this error only in the case where ESC key is pressed and the form is dirty:

I ended up with this code, which works, but generates the above error:

    const modalRef = this.modalService.open(TaskFormComponent, {
      backdropClass: 'task-modal-backdrop',
      size: 'sm',
      centered: true,
      beforeDismiss: () => {
        if ((modalRef.componentInstance as TaskFormComponent).taskForm.dirty) {
          this.utilityService.showConfirmationModal(
            `There are potentially unsaved changes. Leave without updating this task's information?`
          )
            .then(() => modalRef.close('Changes discarded'))
            .catch(() => {
              // User chose not to discard changes.
            });

          return false;
        } else {
          return true;
        }
      }
    });

If you have any ideas on how to eliminate that error, I'd really appreciate it.