Disabling Fieldset on keyboard-submit causes ExpressionChangedAfterItHasBeenCheckedError

[JohannesRudolph]

I'm submitting a ... (check one with "x")

[x] bug report => search github for a similar issue or PR before submitting

Current behavior
I've been pulling my hair out over this issue for quite some time, and I think I've finally nailed it down: A form that has a <input> control wrapped in a <fieldset> and that fieldset is disabled after submit throws a ExpressionChangedAfterItHasBeenCheckedError whenever the form is submitted using the keyboard (and only the keyboard). The error does not appear when the user uses the mouse to submit the form.

Expected behavior
Angular should not throw a ExpressionChangedAfterItHasBeenCheckedError in the following repro.

Minimal reproduction of the problem with instructions
http://plnkr.co/edit/lp3bZobyXWEsqVEuuSty

1. run the plunkr in a separate window, open dev tools (JS console)
2. focus the plunkr run window and press tab once to put focus on username field
3. enter any email address and hit enter to submit the form
4. JS console shows ExpressionChangedAfterItHasBeenCheckedError

Step 4 does not occur if you click "Login" (= form submit button) with the mouse in step 3.

Unfortunately, angular 4 stack traces and debugging in and around that issue were not helpful as I could not get any idea which binding is causing this issue. "Luckily" I did experience the same error when I was still on angular 2 and the stacktraces there pointed me towards

at Wrapper_NgControlStatusGroup.checkHost (/InternalFormsSharedModule/NgControlStatusGroup/wrapper.ngfactory.js:33)

Looking at this, I assume the issue is somewhere in the forms module....

What is the motivation / use case for changing the behavior?
Errors are never good.

Please tell us about your environment:

• Angular version: 2.0.X

@angular/cli: 1.0.0
node: 6.10.1
os: darwin x64
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.2

• Browser: [Chrome 57.0.2987.133 (64-bit)]
  Only tested in chrome

• Language: [all | TypeScript X.X | ES6/7 | ES5]
  TypeScript 2.1

[alexzuza]

Disabling fieldset is calling onBlur on input and then ngClassUntouched has changed unpredictably. One solution to prevent this error is calling cdRef.detectChanges after

this.isLoading = true;

[JohannesRudolph]

I think this is more or less a workaround because the fieldset behavior is not properly enclosed within a zone. Maybe angular should also add a fieldset directive that will handle this?

Not sure what should be done here, but in any case the proposed workaround is not a good idea as it's extremely brittle. I hated it when angular.js code was littered with $scope.$apply() calls and this feels similar.

[UltraMarco]

I've run in the same issue trying to disable mdInput instead of fieldset after submitting a form.
Everything works fine if you press the submit button, but your code breaks when you type "enter" in the password field and rely on a [disabled]="loading" binding to disable it.

[lpikora]

same issue here, angular v4.0.1

[JohannesRudolph]

Has this issue received any triage yet? Anything we can do to help speed this up?

[robersongomes]

+1 angular 4.0.0

[mhevery]

sorry this is working as intended. Because of the blur you are changing the state of the model out of bounds and angular simply warns you that that is the case.

[PhotoPaul]

This might have been considered "working as intended", but we are on Angular 7, the behavior hasn't changed, and the error message is not helping. If it wasn't for this thread we would still be trying to debug this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}