How to not emit event while editing a Form Control value in Angular 2

Question

I am trying to write an autocomplete input field using Angular2 and Form Control.

First I decided to initialize my form Control as follow:

term = new FormControl();

constructor(private _autocompleteService: AutocompleteService) {
  this.term.valueChanges
      .debounceTime(300)
      .distinctUntilChanged()
      .flatMap(search => this._autocompleteService.autocomplete(this.urlSearch, search))
      .subscribe(
          autocomplete => this.autocomplete = autocomplete,
          error => console.log(error)
      );
}

_autocompleteService sends the search request to the server and returns an array of strings.

My html template looks like this. It shows a list of suggestions under the input in which each element can be selected.

<input type="text" [formControl]="term">
  <ul>
    <li *ngFor="let suggestion of autocomplete" (click)="selectChoice(suggestions)">{{ suggestion }}</li>
  </ul>

And here is the selection function:

selectChoice(choice: string) {
  this.autocomplete = [];       // We clean the list of suggestions
  this.term.setValue(choice);   // We write the choice in the term to see it in the input
  this.selected = resp;
}

Here is the problem. When I edit `value` from `term`, it emits an event and sends a new search request which then displays a new list of suggestions.

Is there a way to prevent this event emission and just change the value displayed in the input field?

Lead with the problem dont put it at the end.

Whitecat
– Whitecat

2016-10-04 17:07:47 +00:00
Commented Oct 4, 2016 at 17:07 — Whitecat
– Whitecat, Commented Oct 4, 2016 at 17:07

Francesco Borzi · Accepted Answer · 2019-10-17 10:09:18Z

81

According to the docs you can do the following:

selectChoice(choice: string) {
  this.autocomplete = [];  // We clean the list of suggestions
  this.term.setValue(choice, { emitEvent: false }); // We write the choice in the term to see it in the input
  this.selected = resp;
}

emitEvent: false will prevent the valueChanges event from being emitted.

If emitEvent is true, this change will cause a valueChanges event on the FormControl to be emitted. This defaults to true (as it falls through to updateValueAndValidity).

edited Oct 17, 2019 at 10:09

Francesco Borzi

63.2k56 gold badges203 silver badges280 bronze badges

answered Oct 4, 2016 at 19:49

PerfectPixel

1,9881 gold badge17 silver badges18 bronze badges

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

3 Comments

Pylinux Over a year ago

Anybody else have an issue that {emitEvent: false} is ignored in firefox?

olahell Over a year ago

I noticed that it might not work when the value was set to null or undefined

Ross Brasseaux Over a year ago

@olahell I'm having this issue now. I revert a value and want to ignore the change, but if I revert the value from a null selection, it fires off twice.

Achraf Farouky · Accepted Answer · 2023-03-14 14:18:12Z

1

For those who have the same issue, Try adding onlySelf: true along with the emitEvent: false in this way:

this.term.setValue(choice, { emitEvent: false, onlySelf: true });

answered Mar 14, 2023 at 14:18

Achraf Farouky

1,32014 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to not emit event while editing a Form Control value in Angular 2

2 Answers 2

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Linked

Related