Diálogo modal de uso angular no serviço canDeactivate Guard para alterações não enviadas (Formulário sujo)
No meu aplicativo Angular 4, tenho alguns componentes com um formulário, como este:
export class MyComponent implements OnInit, FormComponent {
form: FormGroup;
ngOnInit() {
this.form = new FormGroup({...});
}
eles usam um serviço Guard para impedir que alterações não enviadas sejam perdidas; portanto, se o usuário tentar alterar a rota antes de solicitar uma confirmação:
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;
}
}
Isso está usando um simplesconfirm(...)
diálogo e funciona muito bem.
No entanto, eu gostaria de substituir esse diálogo simples por um diálogo modal mais sofisticado, por exemplo, usando ongx-bootstrap Modal.
Como posso obter o mesmo resultado usando um modal?