Javascript 无法使用带有共享组件的formControl绑定默认值

我有一个自定义下拉列表，需要使用formControlName更新或设置默认值。 我在共享组件中使用ControlValueAccessors，以便在父组件中将formControl附加到它们，并更新表单的formControl值

现在我在使用下面的代码设置默认值时遇到了一个问题

this.parentForm = this.fb.group({
  district: ['bangalore', Validators.required], // bangalore should be set as my default value.
  distance: [''],
  state:['']
});

HTML代码：

<form [formGroup]="parentForm">
<app-common-dropdown placeHolder="select district" [dropDownId]="'districtLabel'" [dataList]="['bangalore','chennai','pune']" formControlName="district" ></app-common-dropdown>
<app-common-dropdown placeHolder="select distance" [dropDownId]="'distanceLabel'" [dataList]="[100,200,300,400]" formControlName="distance" ></app-common-dropdown>
<app-common-dropdown placeHolder="select state" [dropDownId]="'stateLabel'" [dataList]="['karnataka','tamil nadu','mumbai']" formControlName="state"  ></app-common-dropdown>

. 请查看演示代码并帮助我，因为我感觉代码编写的更多是为了使用formcontrols设置和获取值。
您好，这里有一个代码重构分支

首先，如果要显示控件的值，必须将其传递到要将其可视化的位置

应用程序组件



提交
您需要此下拉列表还是可以使用另一个下拉列表？我只需要“ul”css下拉列表如何启用键盘上下键悬停在选项上（即，
项）。如果您希望为下拉组件内的
元素实现此行为，则此行为是元素的固有行为，您可以尝试添加
index
变量，该变量将在
keyUp
上递增，在
keyDown
上递减，然后在
元素上添加
[ngClass]
，该变量将应用于表示所选索引的
元素。