javascript - Expression has changed after it was checked - angular - Stack Overflow

admin管理员组

文章数量:1290245

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!

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!

• javascript
• html
• angular
• typescript

Share Improve this question Follow edited Sep 6, 2019 at 7:01 Hakan Fıstık 19.5k1616 gold badges123123 silver badges146146 bronze badges asked Jan 2, 2019 at 21:13 AbadouAbadou 9211 gold badge22 silver badges77 bronze badges 8

• 1 That's a very mon problem with the change detection mechanisms in Angular 2+. Have you had a look at this article? – FK82 Commented Jan 2, 2019 at 21:22
• It means you are changing the value of something at the wrong time in angular's lifecycle. Here is a good starting point: angular.io/guide/lifecycle-hooks The solution for many (but not all) lifecycle issues is to put a setTimeout around the assignment to a new variable so instead of foo = bar; you writesetTimeout( () => { foo = bar; }, 0); – Our_Benefactors Commented Jan 2, 2019 at 21:24
• I have tried all solution that i found but still not works :( , I used also setTimout() but it is not working : setTimeout(()=>{ this.popinService.open(messageToDisplay).subscribe((result: ConfirmPopinResultType) => { if (result === ConfirmPopinResultType.CONFIRM) { console.log("test"); } }); }); – Abadou Commented Jan 2, 2019 at 21:44
• Please help ! , i am blocked all the day :( – Abadou Commented Jan 2, 2019 at 21:45
• Did you try adding changeDetection: ChangeDetectionStrategy.OnPush, to your ponent – Naga Sai A Commented Jan 2, 2019 at 21:55

 |  Show 3 more ments

1 Answer 1

Sorted by: Reset to default 7

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 ponent.
Angular Forms use (ngModelChange) to notify of ponent 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).

本文标签： javascriptExpression has changed after it was checkedangularStack Overflow