[angular v.4 - no probado en v.2, pero debería funcionar]

El guardia 'canDeactivate' se está llamando correctamente, pero solo desea volver verdadero para el escenario en el que lo envió, entonces, ¿cómo podemos determinar eso? Ya tiene un identificador para FormGroup, sin embargo, esto no parece tener una propiedad relacionada con el envío. Como alternativa, puede obtener un identificador para su formulario usando el decorador @ViewChild dentro de su clase de componente, así:

 @ViewChild('myForm') myForm;

Para que esto funcione, deberá agregar una variable local para su formulario, así:

 <form #myForm="ngForm" (ngSubmit)="onSubmit()">

luego verá una propiedad en el objeto myForm llamada _submitted. Esto le permite actualizar su condición if para mostrar solo el mensaje de confirmación si se envía sucio &&. p.ej:

 if (this.myForm.form.dirty && !this.myForm._submitted ){ return confirm('You have unsaved changes. Are you sure you want to navigate away?'); } return true;

Supongo que ya ha solucionado este problema, según la fecha de publicación, pero esto podría servir para explicar lo que estaba sucediendo al menos.

En nuestro componente podemos engañar a la alerta de acuerdo a nuestra necesidad usando el método canDeactivate.

Componente:

 import { ComponentCanDeactivate } from './pending-changes.guard'; import { HostListener } from '@angular/core'; import { Observable } from 'rxjs/Observable'; export class MyComponent implements ComponentCanDeactivate { @ViewChild('RegisterForm') form: NgForm; // @HostListener allows us to also guard against browser refresh, close, etc. @HostListener('window:beforeunload') canDeactivate(): Observable<boolean> | boolean { // insert logic to check if there are pending changes here; // returning true will navigate without confirmation // returning false will show a confirm dialog before navigating away return this.form.submitted || !this.form.dirty; // insert your code here for submit event } }

Guardia:

 import { CanDeactivate } from '@angular/router'; import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; export interface ComponentCanDeactivate { canDeactivate: () => boolean | Observable<boolean>; } @Injectable() export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> { canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> { // if there are no pending changes, just allow deactivation; else confirm first return component.canDeactivate() ? true : // NOTE: this warning message will only be shown when navigating elsewhere within your angular app; // when navigating away from your angular app, the browser will show a generic warning message // see https://stackoverflow.com/questions/52044306/how-to-add-candeactivate-functionality-in-component confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.'); } }

Rutas:

 import { PendingChangesGuard } from './pending-changes.guard'; import { MyComponent } from './my.component'; import { Routes } from '@angular/router'; export const MY_ROUTES: Routes = [ { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] }, ];

Módulo:

 import { PendingChangesGuard } from './pending-changes.guard'; import { NgModule } from '@angular/core'; @NgModule({ // ... providers: [PendingChangesGuard], // ... }) export class AppModule {}

Supongo que está navegando después de que el usuario presiona el botón Enviar. El problema de deshabilitar el can deactivate guard cuando el formulario es válido es que el usuario podría presionar accidentalmente el botón cancelar/retroceder, etc., después de que el formulario se haya completado por completo, perdiendo todo su trabajo. En otras palabras, el hecho de que el formulario sea válido no significa que desee desactivar la protección can-deactivate.

Si está navegando, puede establecer una propiedad en "verdadero" en la función onSubmit antes de la navegación de ruta y usarla en su lógica de guardia.

Componente (formas reactivas)

 export class MyComponent { // .. submitSuccess: boolean; canDeactivate(): boolean | Observable<boolean> | Promise<boolean> { if (!this.inputForm.dirty || this.submitSuccess ) { return true; } return this.confirmDialogService.confirm('Discard changes?'); } // ... onSubmit() { this.submitSuccess = true; this.router.navigate(['my-page']); } }

Confirmar servicio de diálogo

 import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class ConfirmationDialogService { /** * Ask user to confirm an action. `message` explains the action and choices. * Returns observable resolving to `true`=confirm or `false`=cancel */ confirm(message?: string): Observable<boolean> { const confirmation = window.confirm(message || 'Are you sure? Your changes will be lost.'); return of(confirmation); } }

Puede desactivar la guardia

 export interface CanComponentDeactivate { canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean; } @Injectable({ providedIn: 'root', }) export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> { canDeactivate(component: CanComponentDeactivate) { return component.canDeactivate ? component.canDeactivate() : true; } }

Rutas

 \\ ... children: [ { path: 'my-path', component: MyComponent, canDeactivate: [CanDeactivateGuard] }, ]},

// ..

¡Espero eso ayude!