Angular Material Autocomplete force selection

Question

In my angular 5 application I have some matAutocomplete, but I want to force the selection of oone of suggestions, so I am following this approach: stackblitz but for some reas

Answer 1

Using blur event and matAutocomplete output event (optionSelected) we can force user to select option.

  
  
    {{item.Name}}
  

ts file functions

countryClick(event: any) {
  this.selectedCountry = event.option.value;
}

checkCountry() {
 setTimeout(()=> {
  if (!this.selectedCountry || this.selectedCountry !== this.signatureFormGroup.controls['country'].value) {
    this.signatureFormGroup.controls['country'].setValue(null);
    this.selectedCountry = '';
  }
 }, 1000);
}

depend on your requirement you can always delay the function which you call in blur or optionSelect event using setTimeout window function.

setTimeout(()=> { 
// function contents
}, 1000);