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><inputformControlName="email"></div><div><selectclass="form-control"formControlName="month"><optionvalue=""hiddenselected>Select a month</option><optionvalue="1">Jan</option><optionvalue="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:

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

this._form = newFormGroup({
  'template': newFormControl('', Validators.required)
});