emitEvent option in forms broken in Angular 12
See original GitHub issueBug 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?
Issue Analytics
- State:
- Created 2 years ago
- Comments:14 (5 by maintainers)
Top Results From Across the Web
patchValue with { emitEvent: false } triggers valueChanges on ...
emitEvent :false works only if you are listening to value changes on the form control with: this.form.valueChanges.
Read more >Angular Reactive Form Emit Event False - StackBlitz
// My reason for Reactive Forms :) // SetValue does not trigger valueChanges. this.fg ...
Read more >FormControl - Angular
Sets a new value for the form control. setValue(value: TValue, options?: { onlySelf?: boolean; emitEvent?: boolean; emitModelToViewChange?: boolean; ...
Read more >Essential Angular Form APIs You Should Know - Medium
Angular reactive forms is a powerful module for managing our forms in web ... setValue, enable or disable form we have additional option...
Read more >A thorough exploration of Angular Forms - InDepth.Dev
It also registers the FormControl into the AbstractControl tree. When using this directive, you can also specify some options: <>Copy. @Input ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Done
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.