NgModel и событие щелчка генерируют ошибку: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после его проверки

Question

Я получаю эту странную ошибку, когда нажимаю на одну из кнопок радио-ввода, обернутую событием щелчка, которое открывает модальное окно:

шаблон

<div class="col-12 text-center my-3"
    (click)="modalHoraireAction(modalHoraire)">
       <input type="radio" [(ngModel)]="selectedType" name="selectedType" value="Bike"> I have a bike<br>
       <input type="radio" [(ngModel)]="selectedType" name="selectedType" value="Car"> I have a car<br>
       <input type="radio" [(ngModel)]="selectedType" name="selectedType" value="Boat" checked> I have a boat<br>
</div>
//...
<!-- MODAL -->
<ng-template #modalHoraire let-modal>
//...

компонент

  modalHoraireAction(modal) {
    this.modalService.open(modal);
  }

Модал работает нормально, если я убрал функцию щелчка от радиомодулей ngModel

Ошибка возникает, когда я нажимаю на переключатели, кажется, что существует путаница между ngModel и моим событием щелчка:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'.
    at viewDebugError (core.js:25491)
    at expressionChangedAfterItHasBeenCheckedError (core.js:25468)
    at checkBindingNoChanges (core.js:25772)
    at checkNoChangesNodeInline (core.js:38548)
    at checkNoChangesNode (core.js:38521)
    at debugCheckNoChangesNode (core.js:39482)
    at debugCheckRenderNodeFn (core.js:39414)
    at Object.eval [as updateRenderer] (CarteComponent.html:9)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:39399)
    at checkNoChangesView (core.js:38356)