Angular2 - Enter Key 执行表单上的第一个(单击)功能 [英] Angular2 - Enter Key executes first (click) function present on the form
问题描述
我不知道为什么每次在输入元素中按 ENTER 键应用程序执行它在 html 中找到的第一个函数.
我该如何预防?
我尝试使用 (keyup.enter)
事件进行一些测试,但它首先执行第一个 (click) 函数,然后执行 (keyup.enter)
函数...
这是代码:
html 表单
<p-页脚><div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"><button class="btn btn-primary btn-space";(click)=do_OffertDuplicate()">
</p-footer></p-对话框>
......
component.ts 函数
do_OffertDuplicate() {如果(this.idCustomer_dup == null){警报(Selezionare il Cliente");返回;}this.offertService.Duplicate(0, this.offert.idOffert, this.idCustomer_dup).subscribe(资源=>{this.displayModal_Duplicate = false;alert("OFFERTA DUPPLICATA ("+res.idOffert+")");this.router.navigate(['OffertDetail', res.idOffert]);});}检查密钥(){警报();}
感谢支持!
如果按钮上没有类型,它会被视为提交按钮,因此它可能正在尝试提交表单.尝试将类型添加到按钮标签:
<按钮...类型=按钮"...>
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 .
How Can I prevent it ?
I tried to make some test with (keyup.enter)
event but it first execute the first (click) function, then the the (keyup.enter)
function...
This is the code:
html form
<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>
......
component.ts functions
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();
}
Thanks to support!
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 Key 执行表单上的第一个(单击)功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!