CODEWITHSUNDEEP
angular
benard-g
benard-g

Reputation: 695

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

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?

Upvotes: 48

Views: 79442

Answers (2)

Achraf Farouky
Achraf Farouky

Reputation: 1240

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 });

Upvotes: 1

PerfectPixel
PerfectPixel

Reputation: 1968

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).

Upvotes: 80

Related Questions