Formas reactivas no se unen desplegable si no hay interacción con forma angular

Tengo un formulario se compone de 3 listas desplegables, esta lista desplegable obtener sus datos de API El problema es que el menú no se unen de datos si no me clic en la lista desplegable (la falta de nitidez en cualquier presentada en el formulario )

mi 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>

Mi 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;

    });
}