Angular6通过按回车键验证模态

Question

我有一个模式，我想通过按enter键来验证它，我这样调用它：

<app-group-edit #newGroup id='add-group' class="modal fade" role="dialog" aria-hidden="true"
(onGroupUpdate)='onGroupCreate(newGroup.editedGroup)'></app-group-edit>

这就是模态：

<div class="modal-body">
<input id="{{editedGroup.id}}" placeholder="Nom du groupe" [(ngModel)]="editedGroup.name" 
autofocus>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-3" data-dismiss="modal" (click)='onNoClick($event)'>Valider</button>
</div>

我试着把按钮类型设置为"提交"，就像一些人在其他帖子中建议的那样，但运气不好。

我还尝试将(keyup.enter(='NoClick($event('添加到触发事件的输入字段中，但如何从函数内部关闭模态？为此，我使用JQuery找到了一些解决方案，但没有使用angular。

我可能在这里错过了什么，任何帮助都将不胜感激。

谢谢！

Answer 1

您有两个选项：当您的模态被打开时，您可以使用事件侦听器来侦听文档。

@HostListener('window:keypress.enter', [$event]) {
// Your code to close the modal
}

为了模拟点击关闭按钮，您可以使用ViewChild/template变量：

<button #closeButton type="button" class="btn btn-3" data-dismiss="modal" (click)='onNoClick($event)'>Valider</button>

@ViewChild('closeButton') closeButton: ElementRef<HTMLButtonElement>;
@HostListener('window:keypress.enter', [$event]) {
this.closeButton.nativeElement.click();
}

你也可以绑定你的输入来模拟点击按钮：

<input id="..." placeholder="..." [(ngModel)]="..." (keyup.enter)="closeButton.click()">

Answer 2

您必须在HTML文件中创建这样一个模板驱动的表单。

<form (ngSubmit)="onNoClick($event)" #f="ngForm" novalidate  ><div class="modal-body">
<input id="{{editedGroup.id}}" placeholder="Nom du groupe" [(ngModel)]="editedGroup.name" 
autofocus> 
<div class="modal-footer">
<button  type="submit" class="btn btn-3" data-dismiss="modal"  >Valider</button>
</div>
</form>