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:
<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>
......
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!
Sin un tipo en el botón, se ve como un botón de envío, por lo que puede estar intentando enviar el formulario. Intente agregar el tipo a la etiqueta del botón:
<button ... type="button" ... >