I am using Angular for my front end and wanted to use a card flip animation on cards. On clicking the card, the card should flip and reveal a form. On clicking submit on this form the form should flip back. I have also added a clear button in the form which should clear out the form but not flip the card back. For some reason in my implementation, clicking clear is flipping the form. Here is the code for the card.componenet.ts

import { Component, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  transition,
  animate,
} from '@angular/animations';

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
  animations: [
    trigger('flipState', [
      state(
        'active',
        style({
          transform: 'rotateY(179deg)',
        })
      ),
      state(
        'inactive',
        style({
          transform: 'rotateY(0)',
        })
      ),
      transition('active => inactive', animate('500ms ease-out')),
      transition('inactive => active', animate('500ms ease-in')),
    ]),
  ],
})
export class CardComponent implements OnInit {
  constructor() {}

  ngOnInit() {}

  flip: string = 'inactive';

  toggleFlip() {
    this.flip = 'active';
  }

  toggleFlipBack() {
    this.flip = 'inactive';
  }
}

Here is the html for this component, as you will notice I havent added any function to the Clear button as of now, but it still flips back

<div class="tp-wrapper">
  <div class="tp-box" (click)="toggleFlip()" [@flipState]="flip">
    <div class="tp-box__side tp-box__front">Front</div>
    <div class="tp-box__side tp-box__back">
      <form (submit)="toggleFlipBack()" [@flipState]="">
        <label for="fname">First name:</label><br />
        <input type="text" id="fname" name="fname" value="John" /><br />
        <label for="lname">Last name:</label><br />
        <input type="text" id="lname" name="lname" value="Doe" /><br /><br />
        <button>Clear</button>
        <input
          type="submit"
          (click)="toggleFlipBack()"
          [@flipState]=""
          value="Submit"
        />
      </form>
    </div>
  </div>
</div>

I also created a stackblitz for this case, just in case someone wants to play around with it.

card flip stackblitz

Can someone please tell me why the clear button behaves this way, without any function attached to it?

CodePudding user response：

Use type="button". By default it is type="submit". Updated StackBlitz.

CodePudding user response：

You run into the default behavior of the button element. Button element become a default submit when nested inside a form.

You can prevent this behavior by adding the type attribute with the value button like here:

<button type="button">Clear</button>