Formes réactives de ne pas lier déroulante si aucune interaction avec la forme angulaire

J'ai un formulaire comprend 3 listes déroulantes, cette liste déroulante obtenir leurs données de l'API Le problème est que le menu déroulant ne pas lier les données si je ne clique pas sur la liste déroulante (flou sur tout déposé dans la forme )

mon code HTML

<form [formGroup]="dropdownsForm" novalidate class="needs-validation">
<div class="dropdown">
              <select class="form-control" formControlName="CountryName" 
                [attr.data-live-search]="true" style="width: 150px;" >
                <option *ngFor="let Country of allCountrys" [value]="Country.id">
                  {{Country.title}}</option>
              </select>
</div>
</form>

Mon ts

allCountrys: DropDownListForLkpsDto[];

 constructor(
    private fb: FormBuilder,
    private _countryService: CountryServiceProxy
  ) {

  }

ngOnInit(): void {
this.dropdownsForm = this.fb.group(
      {
        CountryName: [""],
      }
    );


    this._countryService.getAllCountrysForDDl().subscribe(result => {
      this.allCountrys = result;

    });
}