How can i prevent multiple events on change of Angular form Field

Question

I have a form which has several fields one of them is called bucketfilter where user can of which bucket he would like to retrieve.So to get all changes to the filter i subscribe to the buckerfilter on change like

  this.massEmailForm.get('bucketfilter').valueChanges.subscribe(val => {
            console.log('Value of Bucket Filter Change')
         });

this works fine and triggers the change but in my case causes the event to be fired several times. So if user selects 2 or 3 it will fire 2 or 3 times as i guess the change is gradually and not an all in one. So the question is there a way to delay this onchange event so it is only called ones not multiple times.

vadimk7 · Accepted Answer · 2020-06-05 22:46:46Z

1

If I understand you correct you need debounceTime. If the user change massEmailForm n-th times during time declared in the debounceTime operator you will have only the one (last) event in the stream.

this.massEmailForm.get('bucketfilter').valueChanges
  .pipe(debounceTime(/* ms */))
  .subscribe(val => {
    console.log('Value of Bucket Filter Change')
  });

edited Jun 5, 2020 at 22:46

answered Jun 5, 2020 at 22:40

vadimk7

8,3871 gold badge15 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can i prevent multiple events on change of Angular form Field

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related