如何获取Angular响应式表单中所有下拉框的选项文本值

核心思路 #

利用组件已有的数据源myArrayOfDataObjects，通过表单控件ID匹配对应的选项数组，再根据选中的key值找到对应的文本值。

方案一：直接遍历匹配（适合数据量小的场景） #

修改changeValue方法，遍历表单控件时同步从数据源中查找对应文本：

changeValue() {
  // 遍历所有表单控件
  Object.entries(this.form.controls).forEach(([controlId, control]) => {
    const selectedKey = control.value;
    if (!selectedKey) return; // 跳过未选择的下拉框

    // 根据控件ID找到对应的数据源对象
    const targetData = this.myArrayOfDataObjects.find(item => item.id.toString() === controlId);
    if (!targetData) return;

    // 根据选中的key匹配文本值
    const selectedOption = targetData.options.find(opt => opt.key === selectedKey);
    if (selectedOption) {
      console.log(`控件${controlId}选中文本：${selectedOption.value}`);
      // 在此处添加你的规则验证逻辑
    }
  });
}

方案二：预构建映射表（适合数据量大的场景） #

提前将每个控件的选项key与文本值的映射关系缓存，避免每次查找遍历，提升效率：

1. 在组件内定义映射表：

// 存储控件ID -> (选项key -> 文本值)的映射
optionTextMap: Map<string, Map<number, string>> = new Map();

2. 在ngOnInit中初始化映射表：

ngOnInit() {
  // 原有表单初始化逻辑...

  // 构建映射表
  this.myArrayOfDataObjects.forEach(data => {
    const keyTextMap = new Map();
    data.options.forEach(opt => keyTextMap.set(opt.key, opt.value));
    this.optionTextMap.set(data.id.toString(), keyTextMap);
  });
}

3. 修改changeValue方法：

changeValue() {
  Object.entries(this.form.controls).forEach(([controlId, control]) => {
    const selectedKey = control.value;
    if (!selectedKey) return;

    const keyTextMap = this.optionTextMap.get(controlId);
    if (keyTextMap) {
      const selectedText = keyTextMap.get(selectedKey);
      console.log(`控件${controlId}选中文本：${selectedText}`);
      // 执行验证规则
    }
  });
}

修正HTML中的笔误 #

原HTML中循环选项时使用了错误的vs.options，应改为data.options：

@for (data of myArrayOfDataObjects; track data.id) {
    <mat-select
      [id]="data.id"
      [formControlName]="data.id"
      (selectionChange)="changeValue()"
    >
      <mat-option>--</mat-option>
      @for (opt of data.options; track opt.key) {
        <mat-option [value]="opt.key">{{ opt.value }}</mat-option>
      }
    </mat-select>
}

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