angular2 forms - “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>

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();
      }