Angular 2 animation cause page to reload

Question

I have

<div class="style1" *ngIf="data" [@slideInLeft]="slideInLeft">
  <form [formGroup]="form1" class="form" *ngIf="form1">
....
     <button [disabled]="this.isUpdating === true" type="submit" class="btn btn-default" (click)="cancelClicked()">Cancel</button>
  </form>
</div>

import { slideInLeft } from 'ng-animate';

animations: [trigger('slideInLeft', [transition('* => *', useAnimation(slideInLeft))])]

When I the form is shown animation work fine. As soon as I click cancel the page reloads.

If I remove animations completely cancel does not reload page.

Does anyone knows why this happens?

Answer 1

If you had a stackblitz or something to reproduce the issue, I think I could test my theory. I am guessing it could have something to do with the fact you have the cancel button's type attribute as "submit". That is contradictory of how forms naturally work, the submit button should submit the form, not cancel.

In a plain html the submit button performs whatever is defined by the action attribute, take a look here https://www.w3schools.com/html/html_forms.asp

The first thing I would try is to make the cancel button's type attribute "button", so <button type="button> and see if that helps. If you want to handle the submit action via the angular way, you should handle that via <form (ngSubmit)="takeSomeAction()">