Expression has changed after it was checked - angular

Question

When I call a service in (change) action method , I got this error :

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

My code :

onChange(event) { 

  const messageToDisplay = "Message test";
  this.popinService.open(messageToDisplay).subscribe((result: ConfirmPopinResultType) => {
    if (result === ConfirmPopinResultType.CONFIRM) {
      console.log("test");
    }
  });        
}

onChange is an event handler on an input reactive form (select dropdown list)

<form [formGroup]="poolForm"> 
  <select id="pool-select" #item (change)="item.value = onChangePool(item.value)" formControlName="item"> 
     <option *ngFor="let item of items" [value]="item.name">{{ item.name }}</option> 
  </select> 
</form> 

The exception error occurs when I call the poppin service on Change event handler (that display a pop up with two button Confirm and Cancel)

thank for your help!

Answer 1

You are listening to DOM element events.

(change)="onChange(item.value)"

And you are receiving an error relative to Angular forms.

Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'

The two are in conflict
because the ngModel is tracking changes to the form component.
Angular Forms use (ngModelChange) to notify of component changes.
Angular Reactive Forms use valueChanges observables.

You haven't shared where you've attached the (change) event handler, but it's clearly on a form input that is also being used by ngModel.

You should be using (ngModelChange) instead of (change).