ExpressionChangedAfterItHasBeenCheckedError при использовании ReactiveForms и NgbModal

Question

У меня есть реактивная форма, и когда пользователь нажимает клавишу ESC на входе, я хотел бы показать модал «Вы уверены», прежде чем форма будет скрыта.
Как только модал отображается, я получаюследующее исключение в консоли:

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

Вот блик стека , который показывает проблему (введите фокус и нажмите ESC)

Примечание: Когда вы фокусируете ввод, размытие и фокусировка снова проблема не будет отображаться как ng-untouched не изменится снова.

Есть ли обходной путь?Каков рекомендуемый способ реализации такой функциональности?

Заранее спасибо!

Answer 1

Наконец-то я нашел способ решить эту проблему, но все еще сохранил флаг грязного состояния.

ng-untouched сохраняется в onBlur, когда для FormControl установлено значение {updateOn:'change'} (по умолчанию).Что вам нужно сделать, это просто размыть ввод вручную, прежде чем открывать модальное.Когда отображается модальное изображение, оно все равно будет размыто.

Вот блик стека

Answer 2

Попробуйте это:

this.form = new FormGroup({
  test: new FormControl('',{updateOn:'submit'})
})

Answer 3

Это не проблема события keyup, а проблема пользовательского модала, который вы используете.Попробуйте удалить модал, и он будет работать, или вам нужно сначала его инициализировать.

Answer 4

Попробуйте обернуть блок кода onESC внутри setTimeout, который запустит обнаружение углового изменения с помощью zone.js.

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