“Expression has changed after it was checked” Angular popup error

Question

I have seen couple of articles about this error, I have went through some but couldn't find the solution. Here i am calling alert method when my Boolean is true. The alert is coming perfectly when boolen is true but getting error in console.

This is my template class:

<ng-template #sessionSuccessModal let-c="close" let-d="dismiss">
	<div class="modal-header">
			<h4 class="modal-title">Include Criteria Error</h4>
			<button type="button" class="close" aria-label="Close" (click)="closeModel()">
			<span aria-hidden="true">&times;</span>
			</button>
	</div>
	<div class="modal-body"  class="bg-light text-dark">
			<p>{{ alertMessage }}!</p>
	</div>
	<div style="text-align: center" class="bg-light text-dark">
			<button type="button"  (click)="closeModel()">Ok</button>
	
	</div>
</ng-template>
<div class="grid" >
<div [formGroup]="orderUnitForm" >
	<div class="form-group" [hidden]="searhPanel">
    <div class="layer-types__layer-1" >             
              <div class="bx--row">
              <div class="bx--col-md-12 bx--col-xs-12">              
		        <select id="select-menu" class="bx--text-input" formControlName="ruleSelection" name="ruleSelection" (change)="onChange($event.target.value)" >
		        	 <option  selected>{{defaultSearch}}</option>
		        	 <option  *ngFor="let rule of rules"  [value]="rule.id" >{{rule.name}}</option>
		        </select>
		   	 
		   	  </div>
		   	  </div>
    			
              <div class="bx--row">     
	               <!-- <div class="form-group" [ngClass]="{'has-error': displayMessage.orderingUnit }">  -->       
		              <div class="bx--col-md-2 bx--col-xs-12" align="right">                          
		               	<label for="orderingUnit" class="bx--label">Ordering Unit</label>
		              </div>
		              <div class="bx--col-md-10 bx--col-xs-12">
				 		<input type="text"   id="orderingUnit" placeholder="Ordering Unit" class="bx--text-input"
				 		formControlName="orderingUnit" name="orderingUnit"		 		
				 		[attr.title]="orderingUnitTip" [attr.data-invalid]="displayMessage.orderingUnit ? '' : null">
				 		<div class="bx--form-requirement" *ngIf="displayMessage.orderingUnit" >{{ displayMessage.orderingUnit }} </div>					 	 			 		
					  </div>
				  </div>
			   </div> 
        </div>
    </div>
</div>

This is my ts file

commaSeparation = false;
  ngAfterViewInit() {
        let controlBlurs: Observable<any>[] = this.formControls
            .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
// debounceTime(1000)/
        Observable.merge(this.orderUnitForm.valueChanges, ...controlBlurs).subscribe(value => {
            this.displayMessage = this.genericValidator.processMessages(this.orderUnitForm);
           // this.valid = this.genericValidator.validateControls(this.orderUnitForm);
        });
        this.orderUnitForm.valueChanges.debounceTime(1000).subscribe(value => {
            this.valid = this.genericValidator.validateControls(this.orderUnitForm);
            this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);
              if(this.commaSeparation == true){
                this.displayModel();
              }
        });
  }
  
  //  For Alertmessage
  displayModel() {
    this.alertMessage = 'You cannot enter more than one multiple at the same time ';
    this.successErrorModalBlock = this.modalService.open(this.sessionSuccessModalref);
  }
  // For Alert message closing 
  closeModel() {
    this.successErrorModalBlock.close();
  }

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

Answer 1

Use ChangeDetectorRef Service to force change Detection

When a view uses the OnPush (checkOnce) change detection strategy, explicitly marks the view as changed so that it can be checked again.

import { Component, Input, ChangeDetectionStrategy,ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'component',
  templateUrl: 'component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})


   constructor(cdr:ChangeDetectorRef){} 
   ngAfterViewInit() {
            let controlBlurs: Observable<any>[] = this.formControls
                .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
    // debounceTime(1000)/
            Observable.merge(this.orderUnitForm.valueChanges, ...controlBlurs).subscribe(value => {
                this.displayMessage = this.genericValidator.processMessages(this.orderUnitForm);
               // this.valid = this.genericValidator.validateControls(this.orderUnitForm);
            });
            this.orderUnitForm.valueChanges.debounceTime(1000).subscribe(value => {
                this.valid = this.genericValidator.validateControls(this.orderUnitForm);
                this.commaSeparation = this.genericValidator.validateMultiComma(this.orderUnitForm);
                  if(this.commaSeparation == true){
                    this.displayModel();
                  }
            });
     this.cdr.detectChanges();
      }