Angular2-Enter键执行表单上存在的第一个(单击)功能 [英] Angular2 - Enter Key executes first (click) function present on the form

问题描述

我不知道为什么每次我在输入元素中按ENTER键时 应用程序执行它在html中找到的第一个功能.

I don't know why each time I press ENTER key in an input element the application execute the first function it finds in the html .

如何预防?

我尝试使用(keyup.enter)事件进行一些测试，但它首先执行第一个(单击)函数，然后执行(keyup.enter)函数...

I tried to make some test with (keyup.enter) event but it first execute the first (click) function, then the the (keyup.enter) function...

这是代码:

<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();
}

感谢支持！

推荐答案

按钮上没有类型，则被视为提交"按钮，因此它可能正在尝试提交表单.尝试将类型添加到按钮标签:

Without a type on the button, it is seen as a submit button so it may be attempting to submit the form. Try adding the type to the button tag:

<button
  ...
  type="button"
  ...
>

这篇关于Angular2-Enter键执行表单上存在的第一个(单击)功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！