events - After calling delete button, add button will be also called in angular application

Question

I have a problem in my angular application. After calling a click event in a delete button, the other event in an add button will be also called.

I show my code

<div [formGroup]="formGroup" id="{{controlName}}{{index}}">
  <select class="parameterInputSelect" [formControlName]="controlName" *ngIf="!canAddMore">
    <option *ngFor="let param of selectedValues" [value]="param">{{param}}</option>
  </select>
  <div *ngIf="canAddMore">
    <button mat-mini-fab color="primary" matTooltip="Add Sort Order"
            (click)="add()">
      <mat-icon>add</mat-icon>
    </button>
  </div>
  <div *ngIf="!canAddMore">
    <button
      class="delete-button"
      mat-mini-fab color="primary"
      matTooltip="Remove Sort Order"
      (click)="remove()"
    >
      <mat-icon>delete</mat-icon>
    </button>
  </div>
</div>

this is HTML code, which is a child or shared component and his ts file looks like that

@Input() selectedValues: number[];
  @Input() index: number;
  @Input() formGroup: FormGroup;
  @Input() controlName: string;
  @Input() public canAddMore: boolean;
  @Output() public canAddMoreChange: EventEmitter<boolean> = new EventEmitter<boolean>();


  constructor() {
  }

  public add(): void {
    this.canAddMore = false;
    this.canAddMoreChange.emit(false);
  }

  public remove(): void {
    this.canAddMore = true;
    this.formGroup.get(this.controlName).reset();
    console.log(this.formGroup.get(this.controlName).value);
    this.canAddMoreChange.emit(this.formGroup.get(this.controlName).value);
  }

I have debuged it, when I click delete button, will remove function be called, but next step the add function will also be called

any solution?

Answer 1

You can try to add the type attribute and set it's value to 'button'.

For each button, you can add

<button type="button">

Angular takes click event of buttons inside form as submit. And since you flipped the flag, the other button is getting rendered. And I guess, since the button type is default, it's event is also being called.