打开 NgbModal 后如何不聚焦任何元素？答案

【问题标题】：How to not focus any element after opening a NgbModal?打开 NgbModal 后如何不聚焦任何元素？
【发布时间】：2019-10-30 20:34:21
【问题描述】：

我在模板中有以下 ngForm，我将其作为打开 NgbModal 的参数传递：

<form #optionsForm="ngForm" noValidate (ngSubmit)="saveOptions()" id="optionsForm">
  <div class="modal-body">
    <div class="form-group">
      <label for="customFile">Icon</label>
      <div class="custom-file">
        <input type="file" class="custom-file-input" id="customFile">
        <label class="custom-file-label" for="customFile">Select icon</label>
      </div>
    </div>
    // more will come
    <button type="submit" class="btn btn-secondary pieChart" aria-hidden="true" [disabled]="!optionsForm.valid">
      <i class="fa fa-floppy-o"></i> Save
    </button>
  </div>
</form>

每当我打开 NgbModal 时，焦点都会设置在第一个输入元素上，如下所示：

我不希望在打开表单后关注任何元素，然后按 Tab 键应该关注第一个元素。每当打开表单时，有什么方法可以从tabIndex=-1 开始？

【问题讨论】：

尝试使用 HTML 自动对焦属性。或者在TypeScript中获取元素引用并调用focus方法

标签： angular

【解决方案1】：

也许可以看作是一个 hack (?)，但似乎工作正常......

ngbAutofocus 覆盖了关注第一个元素的行为。例如，将其添加到表单标签似乎可以解决问题：

<form .... ngbAutofocus>

STACKBLITZ

【讨论】：