<mat-form-field>
<input matInput
[formControl]="affiliationName"
[matAutocomplete]="auto">
<mat-label>Affiliation</mat-label>
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of items"
[value]="item.value"
(onSelectionChange)="onAffiliationSelect(item)">
<span class="semibold">{{item.code}}</span>
</mat-option>
</mat-autocomplete>
</mat-form-field>
In the provided code snippet-
affiliationName: FormControl;
ngOnInit() {
this.monitorInput();
}
monitorInput() {
this.affiliationName
.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),takeUntil(this.affiliationDestroy))
.subscribe(value => {
//do something
});
}
When a user inputs text in the field, I would like to trigger a search on the server side. However, after selecting an option from the list and populating the form control with the chosen value, I do not want the valueChanges to be activated again to prevent triggering another search. Is there a method to accomplish this without introducing an additional formControl or Boolean variable to manage the server call?
I came across a similar solution here, but my scenario necessitates having an input so using mat-select is not feasible for me. Angular 7 - not triggering "valueChanges" from the template (using mat-option)