Angular 5 ngSubmit @Output fires twice

Question

CUSTOM COMPONENT

// ...

@Output() submit: EventEmitter < any > = new EventEmitter();

// ...

onFilterSubmit($event): void {
  this.submit.emit($event);
  this.formData = {
    minDate: new Date().toISOString(),
    maxDate: new Date().toISOString()
  };
}

<form (ngSubmit)="onFilterSubmit(formData)">

    <!-- -- -->
    <button mat-button
        mat-raised-button
        [disabled]="reqsForm.form.invalid" 
        type="submit"
        color="primary">
        {{labels.submit}}
    </button>
</form>

OUTER COMPONENT

// ...

onFilterSubmit($event): void {
  console.info("FORM SUBMIT", $event);
}

<custom-component (submit)="onFilterSubmit($event)">

  <!-- -- -->

</custom-component>

OUTPUT

FORM SUBMIT > Object

I had the same issue. Removing `(ngSubmit)` from custom component helped me to get rid of multiple call problem. — AKJ, Jun 25 '19 at 18:00

score 7 · Accepted Answer · answered Aug 31 '18 at 08:00

The reason why this was happening is that an event called "submit" is catchable already from outside the custom component.

I solved by changing the custom event name to filterSubmit

Note also that the type submit on the button - in this use case - is virtually useless, since as default one button in a form will be of type submit.

Angular 5 ngSubmit @Output fires twice

1 Answers1