在Promise中打开NgbModal不会在新模式中自动聚焦

时间:2020-06-04 09:18:19

标签: angular ng-bootstrap ng-bootstrap-modal

要显示错误消息,我想在Promise中打开一个从另一个模态解析的模态。情况是这样的:

  1. 用户单击按钮时,将弹出一个模式框并显示一个表单。
  2. 用户输入必要的信息后,将关闭模式并检查用户输入的信息。
  3. 如果输入正常,则视图将更新;否则,将打开另一个模态(错误模态)。用户只需按“ enter”键就可以关闭错误模式。

打开错误模式通常集中在关闭按钮上。但是,当我在另一个模态的承诺范围内打开模态时,自动聚焦不起作用。这导致奇怪的行为,即当用户按下“ enter”键时,应用再次执行1并再次打开输入模式-而没有关闭错误模式。

以下是处理模态的代码:

openForm() {
    this.ngbModal.open(FormModalComponent).then(
      (success) => {
        const inputIsOkay = checkInput(success);
        if (inputIsOkay) {
          // Updating the view
        } else {
          this.ngbModal.open(ErrorModalComponent);
        }
      },
      (cancel) => {}
    );
  }

我们尝试了几种方法来解决此问题:

  1. 使用NgZone:我们不只是简单地打开模式,而是将其封装在ngZone.run()中。这不会改变自动对焦的行为。 this.ngZone.run(()=>this.ngbModal.open(ErrorModalComponent))不在错误模式的按钮上。
  2. 使用ChangeDetectorRef:错误模式组件的ngOnChanges()方法未触发。
  3. 在错误模式的按钮上使用ngbAutofocus指令:这不会将焦点设置为按钮。
  4. 使用setTimeout():我们将模式的开头封装在setTimeout()方法中。 setTimeout(()=>this.ngbModal.open(ErrorModalComponent));现在,自动对焦功能开始起作用。但是,这感觉不对。

我的问题:处理自动对焦问题的正确和“ ng-bootstrap”方法是什么?

0 个答案:

没有答案