patchValue with { emitEvent: false } triggers valueChanges on Angular 4 formgroup

Question

I have a formbuilder group and am listening for changes with valueChanges and triggering a save function followed by refresh function on the form:

 this.ticketForm.valueChanges.debounceTime(1000).distinctUntilChanged()
 .subscribe(data => {
   this.saveTicket();
   this.refreshTicket();
 })

I am then reloading the form and repatching the data to form fields (and elsewhere on the page, particularly a change log) with patchValue, e.g.:

    this.ticketForm.patchValue(ticket, { emitEvent: false });

however, this causes an infinite loop of saves of the form despite emitEvent : false.

Is this an Angular 4/Ionic 3 bug or a misunderstanding on my part?

That the patching of the value does not emit a change event that would be detected by valueChanges... — larpo, Jul 21 '17 at 16:32
can you create a plunker? `patchValue` shouldn't trigger value changes on the form even without `emitEvent: false` — Max Koretskyi, Jul 21 '17 at 16:56
I did not. I worked around it by avoiding using `patchValue` — larpo, Jun 11 '18 at 09:16
With angular 5 It didn't fire the event with `patchValue(value, {emitEvent: false})` — Amiram Korach, Jul 02 '18 at 10:15
I'm using Angular 6 and an `ngModelChange` event is still firing. — AryanJ-NYC, Aug 09 '18 at 20:43
I'm using Angular 6 as well, and it's still firing with emitEvent: false... This isn't happening for everyone? — Methodician, Nov 15 '18 at 23:33
Same misbehaviour here; event fires despite {emitEvent: False}. Angular 6. — BaBu, Jan 09 '19 at 08:50
I had the same issue, I realised that it was because I was using a customFormControl and my custom form control was not taking emitEvent: false into consideration on initialisation — Tonio, Sep 10 '19 at 10:30
There's a [bug](https://github.com/angular/angular/issues/20230) open on @Tonio issue. Thank you for mentioning this, I would have been stuck quite a while trying to suss out what was going wrong. — Andrew Philips, Aug 13 '20 at 16:10

score 46 · Answer 1 · edited Nov 24 '18 at 19:54

46

Try adding onlySelf: true along with the emitEvent: false in this way:

this.ticketForm.patchValue(ticket, {emitEvent: false, onlySelf: true});

edited Nov 24 '18 at 19:54

סטנלי גרונן

2,917
23
46
68

answered Nov 24 '18 at 17:35

Lakshay

536
5
15

30

not sure if this worked for the OP, but didn't work for me – Craig Wayne Feb 06 '20 at 10:16
This worked for me. modify as well like this, `this.ticketform.updateValueAndValidity({emitEvent: false, onlySelf: true})` – Pradeep shyam Feb 04 '21 at 11:17
3

This may be a bug. From the documentation, it says that the default for onlySelf should be true and this should have no effect. In any case, the behavior here does not match the expected behavior in the documentation. – Jared G Feb 17 '21 at 20:22
I was using setValue with only emitEvent and it worked for me, Thanks! – Khuram Niaz Oct 06 '21 at 22:00
I tried the solution above and it works for me aswell. Nevertheless, the Pradeep comment let me perplex.. I hope there are no side effects. – mtnp Nov 30 '21 at 16:03
It doesn't work for me in 13.0.2. It does work when enabling a control that was previously disabled. ```this.formGroup.controls['samplingTime'].enable({emitEvent: false})```. But it does not work with setValue/reset ```this.formGroup.get('samplingTime').reset(new Date(), {emitEvent: false, onlySelf: true})```; I am using Subscribe(). – Norbert Norbertson Apr 26 '23 at 11:39

score 9 · Answer 2 · answered Dec 12 '20 at 13:42

Can't comment because of rep, so I will post it as an answer to @Craig Wayne.

emitEvent:false works only if you are listening to value changes on the form control with:

this.form.valueChanges.controlName.subscribe(val => doSomething(val));

if you are binding to model changes on the element event is emitted regardless:

<input (ngModelChange)="doSomething($event)"/>

score 5 · Answer 3 · answered Apr 06 '21 at 11:58

5

While working with Angular 9.1.13 I had been facing the same problem. Tried to use the FormControl.setValue, and FormGroup.patchValue APIs, using also the suggested params {emitEvent: false, onlySelf: true} in all possible combinations. The valueChanges observable is was still being triggered.

The only thing that worked for me eventually was :

myForm.disable();
myForm.patchValue({myControl: ''}, {onlySelf: true, emitEvent: false});
myForm.enable();

answered Apr 06 '21 at 11:58

ktsangop

1,013
2
16
29

1

My project is on Angular 8.3.21 and this is the only answer that worked for me. Thanks @ktsangop – gslette Aug 10 '21 at 20:21
2

My project is on Angular 13, and even this did not work. – Victor Zakharov Apr 05 '22 at 12:06
@VictorZakharov as a last resort I would try to wrap the `patchValue` and/or the `enable` calls in a `setTimeout(...)`. Not pretty but who knows... – ktsangop Apr 06 '22 at 13:03
I just created my own framework/library around the standard valueChanges and rxjs, which can set a boolean variable, which changes the behavior accordingly. – Victor Zakharov Apr 06 '22 at 14:02
2

@VictorZakharov Open source it please! – Meqwz Apr 13 '22 at 14:19

score 1 · Answer 4 · answered Jul 05 '21 at 21:42

Why use a patchValue whenever a value changes instead of setting it once onInit?

Personally, I had this issue in a different context in building an option between two required FormControl's

I had a field clearing out another field (as designed, only one should be filled out), but then the subscribe triggered the original to clear. emitEvent:false didn't help because I needed my validators to run on an update. Adding if(value) helped it avoid cascade patching. See below:

this.formGroup.controls.item1.valueChanges.subscribe(value => {
   if(value){
     this.formGroup.patchValue({
       'item2':null
     })
   }
})

this.formGroup.controls.item2.valueChanges.subscribe(value => {
   if(value){
     this.formGroup.patchValue({
       'item1':null
     })
   }
})

Note: For simplicity sake, I didn't include the .pipe(takeUnitl(this.destroy$)). If you don't include this, it'll have a memory leak

I recommend against rhetoric questions in answers. They risk being misunderstood as not an answer at all. You are trying to answer the question at the top of this page, aren't you? Otherwise please delete this post. — Yunnosch, Jul 05 '21 at 21:56

score 0 · Answer 5 · edited Aug 08 '23 at 22:46

None of the answers worked for me, I had to do it manually:

First define a boolean variable in the class:

private dontAllowChangeEventFromForm = false;

Then i defined the following function, using rxjs pipe with filter

private getControlValueChangesWithRestrictions(control: AbstractControl): Observable<any> {
  return control.valueChanges.pipe(
    filter(_ => !this.dontAllowChangeEventFromForm)
  );
}

Then to listen to change use

this.getControlValueChangesWithRestrictions(this.form).subscribe()

Now whenever I want to silently update the form I do

this.dontAllowChangeEventFromForm = true;
this.form.patchValue(/*patch value*/)
this.dontAllowChangeEventFromForm = false;

score -1 · Answer 6 · answered Dec 09 '19 at 06:19

-1

As a workaround, i add skip to rxjs pipe

this.form.valueChanges
    .pipe(skip(1)).subscribe();

answered Dec 09 '19 at 06:19

Wei Lun

45
2
9

patchValue with { emitEvent: false } triggers valueChanges on Angular 4 formgroup

6 Answers6

Linked