Adding FormControlName Makes The Default Value Disappear In My Form's Dropdown In Angular

I have this select element and I'm seeing something odd, when I add the formControlName to the tag the initial value 'month' doesn't display, but if I remove it, it displays but do

Solution 1:

Please add the value attributes to the option elements.

<form [formGroup]="registerForm">
  <div>
  <input formControlName="email">
  </div>
  <div>
  <select class="form-control" formControlName="month">
      <option value="" hidden selected>Select a month</option>
      <option value="1">Jan</option>
      <option value="2">Feb</option>
  </select>
  </div>
  </form>

Working code here: https://angular-reactive-form-dropdown.stackblitz.io

Solution 2:

In your FormGroup you need specify the value as well as in HTML:

<select class="form-control" formControlName="template">
  <option value="">-- Choose template --</option>
  <option *ngFor="let template of templates" [value]="template">{{ template }}</option>
</select>

this._form = new FormGroup({
  'template': new FormControl('', Validators.required)
});