Changing maxlength dynamically of a textarea fires form valueChanges twice after upgrading to Angular 10

🐞 bug report

Affected Package

The issue is caused by package @angular/forms and valueChanges

Is this a regression?

Yes, the previous version in which this bug was not present was: Angular 8

Description

I recently upgraded our application from Angular 8 to Angular 10. After much research, the upgrade was successful. Following the upgrade, I found a bug on form valueChanges with dynamically changing textarea maxlength. I am dynamically changing the maxlength of the textarea based on previous input field in same form. When doing so, form valueChanges gets fired twice and eventually causing Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked error. I have produced a minimal repo below with one textarea and changing it’s maxlength dynamically while typing in it.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-oubtwj Try giving any input to textarea and observe stackblitz console

🔥 Exception or Error

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

🌍 Your Environment

Angular Version: 10.0.3

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.0.2
Node: 12.12.0
OS: darwin x64

Angular: 10.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.2
@angular-devkit/build-angular     0.1000.2
@angular-devkit/build-optimizer   0.1000.2
@angular-devkit/build-webpack     0.1000.2
@angular-devkit/core              10.0.2
@angular-devkit/schematics        10.0.2
@angular/cdk                      10.0.1
@angular/cli                      10.0.2
@angular/material                 10.0.1
@ngtools/webpack                  10.0.2
@nguniversal/builders             10.0.1
@nguniversal/common               10.0.1
@nguniversal/express-engine       10.0.1
@schematics/angular               10.0.2
@schematics/update                0.1000.2
rxjs                              6.6.0
typescript                        3.9.6
webpack                           4.43.0

[madhavan-sundararaj]

Okay cool. Thank you for your time.

[angular-automatic-lock-bot[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.}