Angular Material mat-selection-list throws ExpressionChangedAfterItHasBeenCheckedError on reload

Question

I have a question about mat-selection-list and reactive forms. The problem is that I create mat-selection list and then after I read from the local storage I update my form. Everything works but I get ExpressionChangedAfterItHasBeenCheckedError because it has obviously been created with default values. Is this expected behavior and how can I fix it if it is :)

you can see stack blitz example here:
https://stackblitz.com/edit/angular-ul58q4

Fateme Fazli Fateme Fazli · Accepted Answer · 2018-08-31T09:42:37

this error is because you set the form initial value but view can't detect it, so by using changeDetectorRef after set the initial value it will be right:

import { Component, AfterViewInit, Injectable ,ChangeDetectorRef } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { LocalStorageService } from './local-storage.service';

const FILTER_FORM_STORAGE_KEY = 'filterFormStorageKey';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  formGroup: FormGroup;
  typesControl: FormControl;

  types: any[] = [
    { id: 1, name: 'Type A' },
    { id: 2, name: 'Type B' }
  ];

  constructor(private _storage: LocalStorageService,
  private changeDetectorRef: ChangeDetectorRef) {
    this.formGroup = new FormGroup({
      typesControl: this.typesControl = new FormControl(null, [Validators.required])
    });
  }

  ngAfterViewInit(): void {
    const formStorage = this._storage.get(FILTER_FORM_STORAGE_KEY);
    if (formStorage) {
      this.formGroup.patchValue(formStorage);
    }
    this.changeDetectorRef.detectChanges();
  }

  saveForm() {
    console.log('submitted');
    this._storage.set(FILTER_FORM_STORAGE_KEY, this.formGroup.value);   
  }
}

working DEMO.

Angular Material mat-selection-list throws ExpressionChangedAfterItHasBeenCheckedError on reload

2 Answers