ExpressionChangedAfterItHasBeenCheckedError on ng-untouched flag when disabling a form during submission with ENTER key

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

A form contains a single input. Right after loading, the focus is set in the input. On submit with the ENTER key, the form is disabled (thanks to the use of a <fieldset> container). The error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-untouched: true'. Current value: 'ng-untouched: false'. shows in the Chrome console.

I suppose this behavior occurs:

• The ENTER key is pressed.
• The ng-untouched flag is checked by Angular under-the-hood and is true.
• The onSubmit callback is triggered.
• The form is disabled => the input lost focus => the ng-untouched flag is set to false.
• Angular complains about this undesired change.

Expected behavior

No error.

Minimal reproduction of the problem with instructions

• Extract the content of the ZIP archive enclosed in this issue in the webapps directory of a Tomcat servlet container (or I guess any simple HTTP server).
• Open the URL http://localhost:8080/app/ under Chrome.
• After the page is loaded, set the focus in the input field.
• Press ENTER
• See the error in Chrome console.

What is the motivation / use case for changing the behavior?

Environment

• Tomcat 9.0.5
• JDK 8 update 112
• Google Chrome 64.0.3282.186

Angular version: 5.2.6

Browser:
- [x] Chrome (desktop) version 64.0.3282.186
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Platform:  Windows 10 Family

Others:

May I have done something wrong? Thanks in advance for your help! app.zip

BR, Vincent

[mlc-mlapis]

@Vicente69 … yep, it is true … the problem appears just only with Chrome and not with Edge, IE 11, FF or FF DEV. It is a bit mystery but it has to be related to the fact that different browsers call event handlers in different orders … so it is about some internal implementation of events processing … especially Chrome and onblur … you can find other discussions about the problem even not related to Angular at all if you try to google the term like Different behavior of blur event in different browsers.

[mlc-mlapis]

@Vicente69 … the only possible solution for this template based form case is to use this.cdr.detectChanges(); immediately after this.formDisabled = true; because in other case there is the update of ng-untouched property of <input name="myName" ...> in THE SAME CD cycle as disabling of all controls via binding <fieldset [disabled]="formDisabled">. So you have to run additional CD between them.

You can see it: https://stackblitz.com/edit/mlc-submit-form-disable-inputs?file=app/app.component.ts

The other way would be using a reactive based form (recommended generally) and not a template based form because you would have more possibilities how to control the flow … as using markAsTouched(...) just before this.formDisabled = true;.