Angular 5表单单选组：仅允许一个Primary选项的实现方案问询

嘿，这个需求我之前在项目里刚好实现过，给你一套清晰的解决方案，适配Angular 5 + Angular Bootstrap 4的场景：

1. 定义单选组的数据模型 #

首先在组件类里创建一个数组，用来管理25个单选组的状态，每个组包含唯一标识和当前选中的选项：

// 组件.ts文件
import { Component } from '@angular/core';

@Component({
  selector: 'app-your-form',
  templateUrl: './your-form.component.html'
})
export class YourFormComponent {
  // 生成25个单选组，默认选中N/A
  radioGroups = Array(25).fill(0).map((_, idx) => ({
    id: idx + 1,
    selectedOption: 'N/A'
  }));
  
  // 可选：跟踪当前选中Primary的组ID，优化性能
  currentPrimaryGroupId: number | null = null;
}

2. 编写核心的事件处理逻辑 #

我们需要两个方法：一个监听选项变化，另一个处理Primary选中后的重置操作。这里提供两种实现方式，你可以按需选择：

方式一：遍历所有组（简单直观） #

// 监听每个组的选项变化
handleOptionChange(changedGroup: any): void {
  // 只有当选中Primary时才执行重置逻辑
  if (changedGroup.selectedOption === 'Primary') {
    this.resetOtherPrimaryGroups(changedGroup.id);
  }
}

// 重置其他组的Primary为Secondary
resetOtherPrimaryGroups(currentSelectedId: number): void {
  this.radioGroups.forEach(group => {
    if (group.id !== currentSelectedId && group.selectedOption === 'Primary') {
      group.selectedOption = 'Secondary';
    }
  });
}

方式二：跟踪当前Primary组（性能更优） #

如果组数量较多（比如25个），这种方式不用每次遍历所有组，效率更高：

handleOptionChange(changedGroup: any): void {
  if (changedGroup.selectedOption === 'Primary') {
    // 如果之前有选中的Primary组，重置它
    if (this.currentPrimaryGroupId && this.currentPrimaryGroupId !== changedGroup.id) {
      const prevPrimaryGroup = this.radioGroups.find(g => g.id === this.currentPrimaryGroupId);
      if (prevPrimaryGroup) {
        prevPrimaryGroup.selectedOption = 'Secondary';
      }
    }
    // 更新当前选中的Primary组ID
    this.currentPrimaryGroupId = changedGroup.id;
  } else if (changedGroup.id === this.currentPrimaryGroupId) {
    // 如果当前Primary组被改成了其他选项，清空跟踪ID
    this.currentPrimaryGroupId = null;
  }
}

3. 在模板中渲染单选组 #

用Angular Bootstrap的b-form-radio-group来构建每个组，绑定ngModel和change事件：

<!-- 组件.html文件 -->
<div class="container mt-4">
  <div *ngFor="let group of radioGroups" class="mb-4">
    <h5>单选组 {{ group.id }}</h5>
    <b-form-radio-group
      [(ngModel)]="group.selectedOption"
      (change)="handleOptionChange(group)"
      name="radio-group-{{ group.id }}"
      class="d-flex gap-3"
    >
      <b-form-radio value="N/A">N/A</b-form-radio>
      <b-form-radio value="Secondary">Secondary</b-form-radio>
      <b-form-radio value="Primary">Primary</b-form-radio>
    </b-form-radio-group>
  </div>
</div>

关键注意点 #

• 每个单选组的name属性必须唯一，避免浏览器原生的单选组干扰
• 如果你用的是Angular响应式表单（Reactive Forms），也可以把逻辑适配到FormArray里，核心思路一致：监听Primary选中事件，重置其他组的对应值

内容的提问来源于stack exchange，提问作者Michael Niño