如何在Angular的formBuilder表单数组中隐藏已选下拉选项？

问题原因分析 #

你之前的报错是因为builderPreferences.at(groupId)里的groupId是表单控件的名称，不是FormArray的索引，组件中不存在这个属性，所以会提示找不到。另外你需要的是收集所有已选的groupId集合，而非单个表单组的值，之前的逻辑本身也不成立。这里的group是你*ngFor="let group of groupList"循环出来的列表项，和formBuilder.group创建的表单组完全不是一回事。

解决方案 #

1. 在组件中添加计算属性，获取所有已选的groupId

在组件里新增一个计算属性，用来实时收集FormArray中所有已选中的groupId值：

import { FormArray, FormGroup } from '@angular/forms';

// ... 组件其他代码

get selectedGroupIds(): number[] {
  // 遍历FormArray所有控件，提取每个FormGroup的groupId值
  return this.builderPreferences.controls
    .map(control => (control as FormGroup).get('groupId')?.value)
    // 过滤掉未选择的默认值（比如0或null）
    .filter(id => id && id !== 0);
}

2. 修改模板中的隐藏逻辑

在下拉选项的[hidden]属性里，判断当前group.id是否在已选集合中，同时要排除当前表单组自己的选中项（否则用户无法修改自己当前选择的选项）：

<ul formArrayName="builderPreferences">
    <li *ngFor="let builderPreference of builderPreferences.controls ; let idx = index">  
      <div [formGroupName]="idx">
      <label>Group</label>
      <select formControlName="groupId" id="groupList" class="form-control mb-3">
        <option value="0">-- Select Inventory Group here --</option>
          <option 
            *ngFor="let group of groupList" 
            [value]="group.id" 
            [hidden]="selectedGroupIds.includes(group.id) && (builderPreference.get('groupId')?.value !== group.id)"
          >
            {{ group.name }}
          </option>
      </select>
      </div>
   </li>
</ul>

关键说明 #

• selectedGroupIds会实时同步所有已选中的groupId，确保下拉菜单能动态更新隐藏项
• 加上builderPreference.get('groupId')?.value !== group.id的判断，保证当前表单组自己选中的选项不会被隐藏，用户可正常修改选择
• 改用[value]="group.id"替代字符串插值，更符合Angular属性绑定规范

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