Question

我有一个响应式表单，当用户在输入中按下ESC键时，我想在表单被隐藏之前显示一个“您确定”模式。
显示模态后，我在控制台中得到以下异常：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has 
changed after it was checked. Previous value: 'ng-untouched: true'. Current 
value: 'ng-untouched: false'.

Here is a stackblitz显示问题（焦点输入并按ESC）

注意：：当您集中输入内容时，请重新模糊并重新聚焦，因为ng-untouched不会再次改变，因此不会出现问题。

有什么解决方法吗？建议使用什么方法来实现这种功能？

谢谢！

Answer 1

尝试一下：

f (a -> b) -> f a -> f b

Answer 2

另一个技巧是在打开对话框之前blur activeElement。这是一个在选择 new 时显示模态对话框的示例。

{
  type: 'select',
  key: 'destination',
  templateOptions: {
    label: 'To Account',
    options: [...accounts],
    required: true,
    disabled: false,
  },
  hooks: {
    onInit: (field) => {
      field.form.get('destination').valueChanges.subscribe((value) => {
        if( value == 'new' ){
            (document.activeElement as any).blur();
            this.modal.open(AddAccountDialogComponent);
        }
      });
    }
  }
}

Answer 3

尝试在setTimeout中包装onESC代码块，这将使用zone.js触发Angular Change检测。

onEsc() {
  setTimeout(()=>{
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }, 0);
}

Answer 4

这不是keyup事件的问题，而是您正在使用的自定义模式的问题。尝试删除该模式，它将起作用，或者您需要先对其进行初始化。

Answer 5

我终于找到了解决该问题的方法，但仍然保留了脏标志。

当FormControl设置为{updateOn:'change'}（默认值）时， ng-touched保持onBlur。您要做的只是在打开模态之前手动模糊输入。显示模态时，它仍然会模糊。

Here is a stackblitz

使用ReactiveForms和NgbModal时ExpressionChangedAfterItHasBeenCheckedError

5 个答案: