Если вы используете библиотеку 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, готовых внести свой вклад в интересные проекты. Скажите нам, если вам нужно усилить вашу команду!