如何在Angular FormArray的下拉框中获取选中值

核心报错原因 #

你用ngModel报错是因为Angular禁止在同一个表单控件上同时混用响应式表单指令（formArrayName/formGroupName这类）和模板驱动表单的ngModel，两者会触发表单状态冲突。

无需遍历数组的解决方案 #

下面是两种直接获取当前下拉框选中值的方法，都不用遍历整个FormArray：

方法1：通过(change)事件+索引直接获取

首先确保你的FormArray中每个FormGroup包含存储选中值的控件（比如actorId）：

// TS文件中初始化FormArray
import { FormBuilder, FormArray, FormGroup } from '@angular/forms';

constructor(private fb: FormBuilder) {}

// 假设你的主表单包含actors这个FormArray
actors: FormArray = this.fb.array([]);

// 添加新的演员组时，给每个组添加actorId控件
addActorGroup() {
  const actorGroup = this.fb.group({
    actorId: [''] // 用来存储选中演员的ID，也可以直接存actor对象
  });
  this.actors.push(actorGroup);
}

然后修改模板代码，绑定formControlName并添加(change)事件：

<ng-container formArrayName="actors">
  <ng-container *ngFor="let actorGroup of actors.controls; let i = index">
    <div [formGroupName]="i">
      <div class="container mt-3">
        <div class="row justify-content-center">
          <label class="col-3 mt-2 text-end">Add Existing actor </label>
          <div class="col-6">
            <select 
              class="form-select form-select-sm d-flex justify-content-center"
              formControlName="actorId"
              (change)="handleActorSelect($event, i)"
            >
              <!-- 绑定演员ID作为option值，也可以用[ngValue]="actor"直接存对象 -->
              <option 
                *ngFor="let actor of existingActors"
                [value]="actor.id"
              >
                {{actor.firstName}} {{actor.lastName}}
              </option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </ng-container>
</ng-container>

最后在TS文件中实现handleActorSelect方法，直接拿到当前选中值：

handleActorSelect(event: Event, index: number) {
  const selectEl = event.target as HTMLSelectElement;
  const selectedActorId = selectEl.value;
  
  // 如果你需要完整的actor对象，直接从existingActors中查找
  const selectedActor = this.existingActors.find(actor => actor.id === selectedActorId);
  
  // 这里直接处理当前选中项，无需遍历整个FormArray
  console.log(`第${index+1}个下拉框选中的演员：`, selectedActor);
}

方法2：监听单个FormControl的valueChanges

在添加FormGroup时，直接监听该组内控件的value变化，不用依赖模板事件：

addActorGroup() {
  const actorGroup = this.fb.group({
    actorId: ['']
  });

  // 监听当前组内actorId控件的变化，直接获取选中值
  actorGroup.get('actorId')?.valueChanges.subscribe(selectedId => {
    const selectedActor = this.existingActors.find(actor => actor.id === selectedId);
    console.log('选中的演员：', selectedActor);
  });

  this.actors.push(actorGroup);
}

模板代码只需要绑定formControlName即可，不需要额外事件：

<select 
  class="form-select form-select-sm d-flex justify-content-center"
  formControlName="actorId"
>
  <option *ngFor="let actor of existingActors" [value]="actor.id">
    {{actor.firstName}} {{actor.lastName}}
  </option>
</select>

关键注意点 #

• 不要同时使用formControlName和ngModel，这是报错的根本原因
• 两种方法都直接针对当前操作的下拉框对应的FormControl，无需遍历整个FormArray数组

内容的提问来源于stack exchange，提问作者Benjamin