Expression has changed after it was checked for MatButton on disabled change through form validity change

No error should arise!

When a dynamic input in a form changes its validity, Angular throws an exception.

Steps to reproduce:

https://stackblitz.com/edit/expression-was-checked-material Fill out Question, tick the extra check box, check the console for error logs: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'disabled: false'. Current value: 'disabled: true'.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

    "@angular/cdk": "7.3.2",
    "@angular/common": "^7.0.1",
    "@angular/core": "^7.0.1",
    "@angular/material": "^7.3.2"

Is there anything else we should know?

When there is no MatButton, there is no error.

[Iamakr]

@eydrian MatButton has nothing to do with this error, its because of the way angular’s change detection works in dev mode. Go through this Blog, this will help you understand, more about the error and will suggest some common approaches to tackle the error. Here’s one of the the ways to avoid this error Updated code on stackblitz

[exiledwolfking]

Came across the same issue when the disabled logic of a field changes after an Observable/api return. Putting the timeout on the action that causes a change (in the observable subscribe) in the disabled logic worked for me as well.