do not use CanDeactivate guard when using submit button

Question

Here is my canDeactivate guard and it works. But I dont want to call the guard when I use the submit button. Only when I navigate by any other means. How?

import { Injectable } from '@angular/core';
import { Router, CanDeactivate } from '@angular/router';
import { FormGroup } from '@angular/forms';

export interface FormComponent {
    myForm: FormGroup;
}

@Injectable()
export class DirtyGuard implements CanDeactivate<FormComponent>  {
  constructor(private router: Router) {}

  canDeactivate(component: FormComponent) {
      console.log(component.myForm)
        if (component.myForm.dirty ){
            return confirm('You have unsaved changes. Are you sure you want to navigate away?');
        }
        return true;
  }
}

 <button md-raised-button [disabled]="!myForm.valid" type="submit" color="primary">
                            <i class="material-icons">arrow_forward</i>
                            Exposures: Currencies
                        </button>

Answer 1

[angular v.4 - untested on v.2, but should work]

The guard 'canDeactivate' is correctly getting called, but you just want to return true for the scenario where you've submitted, so how can we determine that? You already have a handle to the FormGroup, however this does not appear to have a property relating to submitted. As an alternative, you can obtain a handle to your form using the @ViewChild decorator within your component class, like so:

@ViewChild('myForm') myForm;

In order for this to work you'll have to add a local variable for your form, like so:

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

you will then see a property on the myForm object called _submitted. This allows you to update your if condition to only show the confirm message if dirty && !submitted. e.g.:

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

I'm assuming you've already worked round this issue, based on the date posted, but this might serve to explain what was going on at least.