Если вы используете библиотеку ng-bootstrap и ее модальную службу, в конкретном сценарии внутри формы вы можете столкнуться с ошибкой, подобной следующей:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.
    at viewDebugError (core.js:9775)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9753)
    at checkBindingNoChanges (core.js:9920)
    at checkNoChangesNodeInline (core.js:13968)
    at checkNoChangesNode (core.js:13942)
    at debugCheckNoChangesNode (core.js:14771)
    at debugCheckRenderNodeFn (core.js:14711)
    at Object.eval [as updateRenderer] (service-configuration-form.component.html:1)
    at Object.debugUpdateRenderer [as updateRender

Моя конкретная ошибка была связана с отображением модального окна подтверждения после переключения флажка. Я добавил в свой компонент функцию обработчика кликов, которая вызывает event.preventDefault() перед использованием modal.open(). I Первоначально ошибка была связана с отсутствием обнаружения изменений в моей форме, поскольку я вручную обрабатывал изменение значения для флажка, но это не оказалось проблемой. Как выясняется здесь, проблема в моем конкретном случае связана с двумя проблемами:

  • Директивы Angular формы имеют привязки, которые обновляются синхронно на основе изменения фокуса.
  • Модальное окно переносит фокус в окно (требуется для доступности)

В моем конкретном случае исправление требует, чтобы событие blur на входе флажка было вручную перед остановкой распространения события, как в:

// HTML
<input type="checkbox" formControlName="active" (click)="onClick($event)">
// Component
onClick(event){
  event.srcElement.blur();
  event.preventDefault();
  this.modal.open(this.modalOptions);
  ...
}

В некоторых других случаях требовалось вызвать модальное окно из setTimeout, но для меня это оказалось не так.

Я технический директор AKIL Technologies, технологического стартапа в Абиджане, Кот-д'Ивуар, где я возглавляю команду разработчиков Angular и React, готовых внести свой вклад в интересные проекты. Скажите нам, если вам нужно усилить вашу команду!