Angular 9 mat-table and ExpressionChangedAfterItHasBeenCheckedError

Question

I have a Angular 9, with Ivy on, component with more than one mat-table. One table has rows with input fields bound to a reactive form. I have the table bound to the form array. This works great... however, when I load the formarray with values I get the fun "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value for 'ng-valid': 'true'. Current value: 'false'" error.

Also, if I set changeDetection: ChangeDetectionStrategy.OnPush on the component, it works fine, but I lose change detection obviously...

Here is my setup (trimmed down):

The reactive form:

quoteForm = new FormGroup({
    QuoteNumber:new FormControl(''),
    ContractTerm:new FormControl(''),
    ContractStartDate:new FormControl(''),
    QuoteName: new FormControl('', Validators.required),
   ...
    Items: this.fb.array([])
  });



async ngOnInit(): Promise<void> {
  ...
  this.QuoteItems = await this.CIM.GetQuoteItems(this.CurrentQuoteNumber);
  const itemsArray = this.quoteForm.get('Items') as FormArray;
  ...
  this.QuoteItems.forEach(item => {
      let NewObj = this.fb.group({
      isNew:false,
     ...
     });
     ...
     itemsArray.push(NewObj);
   });    
  }

  this.ItemdataSource=new MatTableDataSource(this.quoteForm.get('Items').value);
  this.ItemdataSource.paginator = this.paginator.toArray()[0];

}

The table HTML (trimmed):

<table mat-table [dataSource]="ItemdataSource" multiTemplateDataRows formArrayName="Items"> 
...
 <tr mat-header-row *matHeaderRowDef="ItemColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: ItemColumns;" class="element-row" [class.expanded-row]="expandedElement === row" (click)="expandedElement = expandedElement === row ? null : row"></tr>
 <tr mat-row *matRowDef="let row; columns: ['SerialNumbers']" class="detail-row"></tr>
  </table>       
</div>
<mat-paginator [pageSizeOptions]="[20, 40, 100]" showFirstLastButtons></mat-paginator>

Not sure how to troubleshoot this? I get the error after I load the form with items. I could maintain two lists... one for the table and one for the form, but what a PIA that would be? What am I missing?

This kind of issues are usually solved by moving the code to a more appropriate lifecycle event (e.g. afterViewInit) or by manually triggering change detection. In your case, keeping the onPush, importing and injecting ChangeDetectorRef and calling its detectChanges method after creating the fb group should be fine, I think. — alou
I don't understand what the order would be. I tried several. When do I set the table array and when do I load the array with items? Does not matter if I do one in OnInit, or ngAfterViewInit, I get the same error no matter the order. — Joshua Fellers
Just posted an answer, you can only show this much in a comment :) — alou

alou alou · Accepted Answer · 2020-07-20T19:30:41

If I'm not missing something important in what you describe, you should try

Keeping onPush strategy on your change detection
Manually triggering detectChanges after your async code evaluates

So, your component would be something like:

import { ..., ChangeDetectorRef } from '@angular/core';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class YourComponent ... {

  constructor(private cdRef: ChangeDetectorRef) { }


  async ngOnInit(): Promise<void> {
    ...
    this.QuoteItems = await this.CIM.GetQuoteItems(this.CurrentQuoteNumber);
    const itemsArray = this.quoteForm.get('Items') as FormArray;
    ...
    this.QuoteItems.forEach(item => {
      let NewObj = this.fb.group({
        isNew:false,
        ...
      });
      ...
      itemsArray.push(NewObj);
    });    
   }

   this.ItemdataSource = new MatTableDataSource(this.quoteForm.get('Items').value);
   this.ItemdataSource.paginator = this.paginator.toArray()[0];

   this.cdRef.detectChanges();

 }

What's happening?

In dev mode, angular checks / compares the view right after it is rendered, to see if any data changed after last change detection and render. So, the error is triggered because data changed after view content was last rendered.

By setting onPush strategy, you are telling angular to trigger change detection ONLY when an @Input is changed, otherwise this node is ignored. So that fixes the error but you still need to trigger change detection manually, in order to display updated data.

Angular 9 mat-table and ExpressionChangedAfterItHasBeenCheckedError

1 Answers