I am currently working on an Angular 11 application. On one of the pages, there are 2 radio buttons and a dropdown. The desired behavior is that whenever the radio button selection is changed, the dropdown value should be reset to empty.
The code provided works correctly in Chrome. However, in Internet Explorer, an empty option is still visible in the dropdown. It is preferred to not display an empty option in the dropdown list.
test.component.html
<form [formGroup]="myForm">
<select [id]="control.Id" [formControlName]="control.Id" [value]="control.Value">
<ng-container *ngFor="let item of control.Items">
<option [value]="item.Value">{{item.Key}}</option>
</ng-container>
<option hidden disabled value="" style="display:none;"></option>
</select>
</form>
test.component.ts
this.myForm.controls['City'].valueChanges.subscribe(this.onCityChange.bind(this));
onCityChange()
{
this.myForm.get['City'].patchValue('');
}