Angular响应式表单新增下拉框后值同步问题求助

我是Angular新手，此前跟随教程实现了可动态增减输入项的响应式表单，点击按钮可复制输入框或删除非唯一输入项，功能正常。但新增p-dropdown下拉框后，所有下拉框选中值同步变化。

仅在后端添加了以下代码及填充数据的方法：

localSystemBECS : LocalSystemsBECSResponse;
selectedBEC: LocalSystemElement;

原有表单结构：

bec_donors: this.fb.array([this.fb.group({becDonorId:''})])

问题根源 #

所有下拉框绑定了同一个全局selectedBEC变量，导致选中状态同步变化。需将下拉框的选中值集成到响应式表单的FormArray中，让每个动态项的表单组独立维护自己的选中值。

步骤1：扩展表单结构 #

修改FormArray内的FormGroup，新增对应下拉框的表单控件，并封装表单组创建逻辑方便复用：

becDonorsForm: FormGroup;
ngOnInit(): void {  
  this.becDonorsForm = this.fb.group({
    bec_donors: this.fb.array([this.createBecDonorGroup()]),
  })   
}  

// 封装表单组创建方法
createBecDonorGroup() {
  return this.fb.group({
    becDonorId: '',
    selectedBEC: null // 新增下拉框对应的表单控件
  });
}

addbecDonorID() {
  this.becDonors.push(this.createBecDonorGroup());
}

deletebecDonorID(index) {
  this.becDonors.removeAt(index);
}

get becDonors() {
  return this.becDonorsForm.get('bec_donors') as FormArray;
}

步骤2：修改前端下拉框绑定 #

移除ngModel和standalone配置，改用响应式表单的formControlName绑定到当前表单组的selectedBEC控件：

<div class="col-md-4">
  <fieldset>
    <legend style="font-size:12px;">ph:BECS</legend>
    <ng-container style="min-width: 100%;" *ngIf="localSystemBECS">
      <p-dropdown styleClass="w-100" 
                  [options]="localSystemBECS.localSystem" 
                  formControlName="selectedBEC" 
                  optionLabel="name"></p-dropdown>
    </ng-container>
  </fieldset>
</div>

效果说明 #

• 每个动态生成的表单组独立维护自身的selectedBEC状态，不会再出现同步变化问题
• 表单提交时，becDonorsForm.value会包含所有项的becDonorId和selectedBEC数据
• 无需再单独维护全局selectedBEC变量，表单控件自动管理选中状态

内容的提问来源于stack exchange，提问作者F. Iván