Angular 14: Angular animation causes form submission to occur when deleting item from FormArray-CodePudding

I started creating animations for my app and I noticed when I delete an element from a FormArray it triggers a form submission. I made custom form controls using ControlValueAccessor and pass some of my FormGroups through @Inputs. The animation I'm using looks like this

export const smallItem = trigger('smallItem',[
  transition('void => *', [
    animate('80ms', keyframes([
      style({
        opacity: 0,
        transform: 'translateY(-80px) scale(0.7)',
        zIndex: 5,
        offset: 0
      }),
      style({
        transform: 'translateY(-20px) scale(0.7)',
        opacity: 1,
        offset: 0.6
      }),
      style({
        transform: 'translateY(0) scale(0.7)',
        offset: 0.9
      }),
      style({
        transform: 'scale(1.3)',
        zIndex: 7,
        offset: 0.95
      }),
      style({
        transform: 'scale(1)',
        zIndex: 6,
        offset: 1
      })
    ]))
  ]),
  transition('* => void', [
    animate('300ms', keyframes([
      style({
        opacity: 1,
        transform: 'translateY(0) scale(1)',
        zIndex: 6,
        offset: 0
      }),
      style({
        transform: 'translateY(0) scale(0.7)',
        zIndex: 5,
        offset: 0.3
      }),
      style({
        opacity: 0,
        transform: 'translateY(-80px) scale(0.7)',
        offset: 1
      })
    ]))
  ])
])

I import it into my component and apply it to an *ngFor element like this

<section  formArrayName="expressions">

  <media-expression-input *ngFor="let a of ExpressionList.controls; let i = index"
    [MediaExpressionForm]="a"
    [GroupId]="i"
    [ShowDelete]="i === 0 ? false : true"
    (DeleteItem)="removeMediaExpression($any($event))"
    @smallItem
  ></media-expression-input>

</section>

I've also tried using [@smallItem] as well which still works and also submits the form. When I remove the animation all together I can delete elements without triggering a submission. I don't know what to look into or tinker with to try resolving this issue and haven't been able to find any similar issues online but to see what I mean open this stackblitz and follow these steps.

1. Open the inspector and select the console tab.

2. Scroll down and click on add media query button.

3. In the new media query form click on the add expression button.

4. When the new expression pops up click the delete button.

Inside the console you will see an object appear which I only console.log() in the function I made for processing the form. On the screen beneath the media queries you'll also see a window pop up showing a JSON object which is only visible after the form is submitted. Does anybody know what might make this occur and how to stop it?

CodePudding user response：

I believe the issue lies in that <button> by default has a type of 'submit', playing with your stackblitz and setting the type to be 'button' prevents the submission.

Edit so your HTML goes from:

<article >
    <button  *ngIf="ShowDelete" (click)="removeGroup()">delete</button>
  </article>

To:

<article >
    <button type="button"  *ngIf="ShowDelete" (click)="removeGroup()">delete</button>
  </article>

Inside of your MediaExpressionInput component