You don’t need form control when you are using an ngModel. Here is an example on Stackblitz and here is the code :

html :

<div class="form-group">
    <label for="Categorie">Categorie  : </label>
    <select class="form-control" name="Categorie" [(ngModel)]="selectedCategory" required>
    <option *ngFor="let categorie of categories" [ngValue]="categorie" 
    (change)="Selectedvalue($event)">
      <h1>{{categorie.name}}</h1>
    </option>
  </select>
</div>

ts :

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  selectedCategory;
  categories = [
    { id: 1, name: "cat 1" },
    { id: 2, name: "cat 2" },
    { id: 3, name: "cat 3" }
  ];

  ngOnInit() {
    this.selectedCategory = this.categories[2];
  }

  selectedvalue(item) {
    this.selectedCategory = item;
  }
}

OnInit, I set the default value of the select (you can remove it if you want to use the deault option in your html template).

When an item is selected, I set it in selectedCategory, which is the ngModel of the select.

when I want to select an option it shows blanc or doesn’t show the list I don’t know why or how to fix it

<div class="form-group">
                        <label for="Categorie">Categorie  : </label>
                        <select class="form-control" name="Categorie"   formControlName="Categorie" [(ngModel)]="this.Categorie.id" required>
                        <option Value="0" disabled > choisir categorie</option>
                          <option *ngFor="let Categorie of  categorieList" [ngValue]="this.Categorie.id" (change)="Selectedvalue($event)">
                            <h1>{{Categorie.name}}</h1>
                          </option>
                      </select>
                    </div>