mat-button ExpressionChangedAfterItHasBeenCheckedError

Bug:

Given 2 components: App and Sub where App has a reactive form containing

• a checkbox
• Sub component wrapped in a ngIf checking that the checkbox is checked
• a submit button with [disabled]="form.invalid"

and Sub contains a required text input.

App.onInit defines a FormGroup containing only the checkbox. Sub.onInit adds to the parent form a new FormGroup (parentFormDirective is injected with viewProvider)

All inputs have their matching material directives (e.g. mat-checkbox, mat-button, etc…")

When the checkbox is checked, ExpressionChangedAfterItHasBeenCheckedError is thrown. If mat-button on the submit button is removed, the error is not thrown.

What is the expected behavior?

For ExpressionChangedAfterItHasBeenCheckedError to not be thrown.

What is the current behavior?

ExpressionChangedAfterItHasBeenCheckedError is thrown.

What are the steps to reproduce?

Sample project on github. Created i StackBlitz, but got the following error when trying to save: PATCH https://stackblitz.com/api/projects/angular-pc3way net::ERR_EMPTY_RESPONSE

What is the use-case or motivation for changing an existing behavior?

Nesting inside parent forms reusable components that impact form-validity, is one of the fundamental features of a component-based framework. Having a material-styled button should not break this feature.

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

Angular 5.2.8 Material 5.2.5 OS Windows 10 TypeScript 2.4.2

Is there anything else we should know?

[maxime1992]

I’ve been going mad for hours trying to figure out that.

I really thought I had an architecture flow because I’m building a huge form, composed of sub forms and I thought that the error was because of that and that it might reveal an architecture problem.

I spent some time trying to create a small repro and yes, same result: The error is still thrown. Until I had the idea to remove everything from material and use basic HTML: The error was gone.

I confirm that when I remove the [disabled]="userForm.invalid" on the button, everything works fine though.

I think that the stackblitz provided here is enough but if sharing my repro can help let me know I’ll push it on Github 👍

[Pratik12122]

[disabled]=“form.pristine || !form.valid” worked for me.