Using { emitEvent: false } alongside patchValue will not trigger valueChanges on an Angular 4 formgroup

Question

Using { emitEvent: false } alongside patchValue will not trigger valueChanges on an Angular 4 formgroup

I currently have a formbuilder group where I am monitoring changes using valueChanges. Whenever a change is detected, I trigger a save function and then refresh the form:

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

Afterwards, I reload the form and update the data in various form fields (as well as other areas on the page such as a change log) using patchValue method, like this:

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

However, despite setting emitEvent to false, it seems to be causing an endless loop of saving the form. Is this issue related to Angular 4 or Ionic 3, or could it be due to my misunderstanding of how the process works?

angular typescript ionic-framework angular2-formbuilder angular-reactive-forms

Answer 1

Answer №1

To enhance the functionality, include onlySelf: true in addition to emitEvent: false as shown below:

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

Answer 2

To enhance the functionality, include onlySelf: true in addition to emitEvent: false as shown below:

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

Answer 3

Answer №2

Due to my reputation, I am unable to leave a comment, so I will share my thoughts in response to @Craig Wayne here instead.

If you use emitEvent:false, it will only work when monitoring changes in the form control with:

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

However, if you are linking to model modifications on the element, the event will be triggered regardless:

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

Answer 4

Due to my reputation, I am unable to leave a comment, so I will share my thoughts in response to @Craig Wayne here instead.

If you use emitEvent:false, it will only work when monitoring changes in the form control with:

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

However, if you are linking to model modifications on the element, the event will be triggered regardless:

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

Answer 5

Answer №3

Dealing with Angular 9.1.13, I encountered a persistent issue. I attempted to utilize the methods FormControl.setValue and FormGroup.patchValue, including the recommended parameters

{emitEvent: false, onlySelf: true}

in various permutations. Despite this, the valueChanges observable continued to trigger.

Ultimately, what resolved the issue for me was:

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

Answer 6

Dealing with Angular 9.1.13, I encountered a persistent issue. I attempted to utilize the methods FormControl.setValue and FormGroup.patchValue, including the recommended parameters

{emitEvent: false, onlySelf: true}

in various permutations. Despite this, the valueChanges observable continued to trigger.

Ultimately, what resolved the issue for me was:

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

Answer 7

Answer №4

What are the benefits of using patchValue every time a value changes as opposed to setting it once during initialization?

In my own experience, I encountered this issue in a different scenario while creating an option between two required FormControl's

I had one field clearing out another field (as intended, only one should be filled out), but then the subscribe function triggered the original field to clear as well. Setting emitEvent:false didn't solve the problem because I needed my validators to run on each update. By adding if(value) condition, it helped prevent cascading patches. See the example 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: To keep things simple, I omitted the .pipe(takeUnitl(this.destroy$)) method. If you skip this step, there may be a memory leak.

Answer 8

What are the benefits of using patchValue every time a value changes as opposed to setting it once during initialization?

In my own experience, I encountered this issue in a different scenario while creating an option between two required FormControl's

I had one field clearing out another field (as intended, only one should be filled out), but then the subscribe function triggered the original field to clear as well. Setting emitEvent:false didn't solve the problem because I needed my validators to run on each update. By adding if(value) condition, it helped prevent cascading patches. See the example 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: To keep things simple, I omitted the .pipe(takeUnitl(this.destroy$)) method. If you skip this step, there may be a memory leak.

Answer 9

Answer №5

I encountered a situation where none of the provided solutions worked for me, so I had to resort to manual intervention:

Initially, I created a boolean variable within the class as follows:

private flagStopChangeEvent = false;

Subsequently, I crafted the following method, leveraging rxjs pipe along with filter:

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

To monitor changes, I utilized the following snippet:

this.getControlChangesWithRestrictions(this.form).subscribe()

Whenever I needed to make modifications to the form without triggering events, I executed the following steps:

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

Answer 10

I encountered a situation where none of the provided solutions worked for me, so I had to resort to manual intervention:

Initially, I created a boolean variable within the class as follows:

private flagStopChangeEvent = false;

Subsequently, I crafted the following method, leveraging rxjs pipe along with filter:

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

To monitor changes, I utilized the following snippet:

this.getControlChangesWithRestrictions(this.form).subscribe()

Whenever I needed to make modifications to the form without triggering events, I executed the following steps:

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

Answer 11

Answer №6

To address this issue, I decided to include the skip function in my rxjs pipe

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

Answer 12

To address this issue, I decided to include the skip function in my rxjs pipe

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

Using { emitEvent: false } alongside patchValue will not trigger valueChanges on an Angular 4 formgroup

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Using TypeORM with a timestamp type column set to default null can lead to an endless loop of migrations being

Navigating Cross-Origin Resource Sharing (CORS) Challenges within

How to effectively manage blank strings, null values, and undefined values when filtering in Angular

Whenever I attempt to launch my cross-platform application on an android device, an error occurs

The error message "NextFunction does not have the property 'render'" appears when using Angular Universal in conjunction with Express

An issue arose when attempting to forward the request with a self-signed certificate in the chain for the Angular CLI API

Expanding on the http class to utilize custom properties within Angular2 typescript

What makes TypeScript code run successfully using `node` instead of `ts-node` by mistake?

Crafting a Retro Style

Declaring types in NGRX Effect V10 has changed since classes are no longer used, causing types to not be inferred as easily

Exploring the power of Node JS with Promise.all and forEach within a nested array

Webpacker/Typescript is unable to locate a file within the Rails asset pipeline

Bluemix is equipped with a robust build pipeline that allows users to easily set their

Setting the TypeScript version while initializing CDK

Step-by-Step Guide: Building a Reusable Component for Angular Material Data Table in Angular 5

Is there a way for me to distinguish between a user connecting from the intranet or the internet?

The file node_modules/angular2-qrscanner/angular2-qrscanner.d.ts has been detected as version 4, while version 3 was expected. Resolving symbol

What is the best method to extract the values of objects in an array that share

The variance in module types within the tsconfig.json file

Is there a way to obtain the dimensions of an image link in Angular?