Expression has changed after it was checked.

Bug description:

When using async angular 2 validators in combination with the tab control it throws:
“Expression has changed after it was checked. Previous value: ‘true’. Current value: ‘false’.”
In the plunker I could only reproduce the problem referencing the same formControl. In the real application I don’t do this and also have that problem.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/qXwfi24qGKm1S1W3CWg3?p=preview

Version of Angular, ng-bootstrap, and Bootstrap:

See plunker.

5 thoughts on “Expression has changed after it was checked.

  1. I debugged a similar issue and traced it to the following:
    excerpt
    <div [attr.aria-selected]="panel.focused">
    <a (focus)="panel.focused = true" (blur)="panel.focused = false">

    Within a template[ngbPanelTitle] I have a button which opens an NgbModal. Mousing over the button sets panel.focused to true, clicking the button triggers a change detection cycle and launches the modal which causes panel.focused to change to false, throwing the error: Expression has changed after it was checked. Previous value: \'true\'. Current value: \'false\'.

  2. Getting the same error –

    1. Clicking inside an input element (and by that – grabbing the focus)
    2. Hitting a keyboard shortcut (like ctrl+k) which runs a modal opening code
    3. Trying to open a new modal results in this error

    So it’s definitely has something to do with the focus.

    What have worked for me:

    What I did is to invoke blur() on the focused element before opening the modal window, that helped.

    Hope it helps in some way

  3. Thnx for the plunker @L1NT – I understand now what is going on! It basically boils down to having a binding that changes based on element’s focus – modal gets focused when opened hence the error.

    The good news is that accordion doesn’t really need focus-based inputs – we should be able to remove this portion of the code and remove the root cause of the problem.

    I know how to fix it and I will do so as soon as the dust settles around Angular 4.0 support. Once again, thnx for the plunker.

  4. I go this working by having these lines in my code :

    // This is used to push change detection for ng2
    constructor(private cdRef: ChangeDetectorRef) {}

    ngAfterViewChecked() {
    //explicit change detection to avoid “expression-has-changed-after-it-was-checked-error”
    this.cdRef.detectChanges();
    }

  5. Tuve el mismo problema al ejecutar (keypress)=metodo($event) y se intentaba abrir un modal me salia el error en consola // lo solucione con :
    metodo(event) {
    event.srcElement.blur ();
    event.preventDefault ();
    this.modal.open (this.modalOptions);

    }
    asi con blur(), ya se detecta los cambios de los focus