Анимация Angular 2 вызывает перезагрузку страницы

У меня есть

<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))])]

Когда я вижу форму, анимация работает нормально. Как только я нажимаю отменить, страница перезагружается.

Если я удаляю анимацию полностью, отмена не перезагружает страницу.

Кто-нибудь знает, почему это происходит?


angular angular-animations
person pantonis    schedule 01.08.2017    source источник
comment
Вы когда-нибудь узнавали ответ на этот вопрос? У меня та же проблема, но у меня есть форма внутри компонента, компонент внутри div и анимация в div. Но эта отмена по-прежнему вызывает перезагрузку страницы. Единственное, что делает моя отмена, это переключает логическую переменную.   -  person nmrichards    schedule 03.10.2019
comment
Это связано с тем, что форма пытается каким-то образом отправить: O stackoverflow.com/questions/39282116/   -  person Verri    schedule 28.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

Если бы у вас был stackblitz или что-то еще, чтобы воспроизвести проблему, думаю, я мог бы проверить свою теорию. Я предполагаю, что это может иметь какое-то отношение к тому факту, что у вас есть атрибут типа кнопки отмены как «отправить». Это противоречит тому, как формы работают естественным образом, кнопка отправки должна отправлять форму, а не отменять.

В простом html кнопка отправки выполняет все, что определено атрибутом действия, посмотрите здесь https://www.w3schools.com/html/html_forms.asp

Первое, что я бы попробовал, это сделать атрибут типа кнопки отмены «кнопкой», поэтому <button type="button> и посмотреть, поможет ли это. Если вы хотите обрабатывать действие отправки угловым способом, вы должны обрабатывать это через <form (ngSubmit)="takeSomeAction()">

person Will    schedule 07.10.2019