No sé por qué cada vez que presiono la tecla ENTER en un elemento de entrada, la aplicación ejecuta la primera función que encuentra en el html.

¿Cómo puedo prevenirlo?

Intenté hacer algunas pruebas con el evento (keyup.enter) , pero primero ejecutó la primera función (clic), luego la función (keyup.enter) ...

Este es el código:

formulario html

 <form role="form" [formGroup]="FormOffertDetail" (keyup.enter)="checkKey()"> <p-dialog modal="modal" [(visible)]="displayModal_Duplicate" width="300" responsive="true"> <p-header> Dupplica Offerta </p-header> <div class="form-group"> <label for="idCustomer">Selezionare il Cliente</label> <!--<input formControlName="idCustomer" type="text" class="form-control input-sm" id="idCustomer" placeholder="" required autofocus>--> <select id="idCustomer_dup" class="form-control" formControlName="idCustomer_dup" [(ngModel)]="idCustomer_dup"> <option [value]="c.idCustomer" *ngFor="let c of listCustomers"> {{c.businessName}} </option> </select> </div> <p-footer> <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> <button class="btn btn-primary btn-space" (click)="do_OffertDuplicate()"><i class="fa fa-copy fa-lg" aria-hidden="true"></i> Dupplica</button> <button class="btn btn-danger btn-space" (click)="displayModal_Duplicate=false"><i class="fa fa-trash-o fa-lg" aria-hidden="true"></i> Annulla</button> </div> </p-footer> </p-dialog>

......

funciones componente.ts

 do_OffertDuplicate() { if (this.idCustomer_dup == null) { alert("Selezionare il Cliente"); return; } this.offertService.Duplicate(0, this.offert.idOffert, this.idCustomer_dup).subscribe( res => { this.displayModal_Duplicate = false; alert("OFFERTA DUPPLICATA ( "+res.idOffert+" )"); this.router.navigate(['OffertDetail', res.idOffert]); } ); } checkKey() { alert(); }

¡Gracias al apoyo!