Реактивные формы не связывают выпадающий список, если нет взаимодействия с формой в угловой

У меня есть форма, включающая 3 раскрывающихся списка, этот раскрывающийся список получает свои данные из API Проблема в том, что выпадающий список не привязывает данные, если я не нажимаю на выпадающий список (размытие на любом файле в форме).

мой 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>

Мои тс

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;

    });
}