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）='onNoClick（$ 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>

Angular6通过按Enter键验证模态

2 个答案: