Search code examples
angulartypescriptangular-reactive-formsangular-forms

Skip the program-made changes in valueChanges for FormControl


I have a form to register an event, I ask for a date, time and if it recurs (daily, weekly, monthly or none at all).

I have also set up another input for the user to specify when that recurrence ends. The problem is that there are two ways of "ending that recurrence". I have a "# of repetitions" (in case i.e. you want to repeat that event weekly for two weeks), but I also have a datepicker in case you want to specify the ending date (i.e you want it to repeat daily until September 1st).

When one of the inputs's value changes I trigger a function to update the other, so it keeps consistent

For example, if I specify that I want it to repeat daily and I set 5 times, then my datepicker would show the date 5 days away from the original date and vise versa.

The problem is that, since I have a listener for changes on both inputs, when the user changes one, I change the value on the other one (programmatically) and that triggers the valueChanges on that input as well, so it keeps going back and forth.

After all this introduction, is there any way you may suggest to difference between a "user-made" change and the one I do on inputValueChanges ?


Solution

  • When you update a form control value with setValue you can set the emitEvent option to false. This will stop the valueChanges from firing on the change.

    yourControl.setValue(newValue, { emitEvent: false });