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)
});
Post a Comment for "Adding FormControlName Makes The Default Value Disappear In My Form's Dropdown In Angular"