Diálogo modal de uso angular en el servicio canDeactivate Guard para cambios no enviados (formulario sucio)
En mi aplicación Angular 4 tengo algunos componentes con un formulario, como este:
export class MyComponent implements OnInit, FormComponent {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({...});
}
usan un servicio Guard para evitar que se pierdan los cambios no enviados, por lo que si el usuario intenta cambiar la ruta antes de solicitar una confirmación:
import { CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';
export interface FormComponent {
form: FormGroup;
}
export class UnsavedChangesGuardService implements CanDeactivate<FormComponent> {
canDeactivate(component: FormComponent) {
if (component.form.dirty) {
return confirm(
'The form has not been submitted yet, do you really want to leave page?'
);
}
return true;
}
}
Esto está usando un simpleconfirm(...)
diálogo y funciona bien.
Sin embargo, me gustaría reemplazar este cuadro de diálogo simple con un cuadro de diálogo modal más elegante, por ejemplo, usando elngx-bootstrap Modal.
¿Cómo puedo lograr el mismo resultado usando un modal en su lugar?