Bug Report

Affected Package

@angular/forms

Is this a regression?

Yes, it was working for us in ng11

Description

after upgrading to Angular 12 we started to have a problem with our material date range component. My investigation leads me to using emitEvent: false option in (form control).setValue method which now doesn’t prevent the event to be emitted.

Please see the stackblitz reproduction below. There is a setter

 private set selectedRange(dateRange: DateRange) {
    this.dateRangeForm.setValue(
      {
        start: dateRange.start,
        end: dateRange.end
      },
      {
        emitEvent: false,
        onlySelf: true
      }
    );
  }

which when called triggers valuechanges event and causing infinite loop of events, Just change the date or daterange in the stackblitz example.

Minimal Reproduction

https://stackblitz.com/edit/date-range-weird-behavior?file=src/app/app.component.ts

Exception or Error

Your Environment

Angular Version:

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

Angular CLI: 12.0.0
Node: 14.16.1
Package Manager: npm 6.14.12
OS: win32 x64

Angular: 12.0.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, material
... platform-browser, platform-browser-dynamic, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.0
@angular-devkit/build-angular   12.0.0
@angular-devkit/core            12.0.0
@angular-devkit/schematics      12.0.0
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.0.0
rxjs                            6.6.3
typescript                      4.2.4

Anything else relevant?