Angular 13点击按钮获取独立Div内单选框ID/Name的方案优化咨询

你的方案功能上能实现需求，但不符合Angular的设计理念，存在以下问题：

• 直接操作DOM违反了Angular「数据驱动视图」的核心原则，组件逻辑与DOM结构耦合度高，后续维护、重构难度大
• 使用any类型丢失了TypeScript的类型校验优势，容易引发潜在的类型错误
• 如果后续通过*ngIf、*ngFor等指令动态渲染单选框，querySelectorAll可能无法正确获取到元素，导致逻辑失效

推荐使用Angular官方提倡的数据绑定或响应式表单方案，完全避免直接操作DOM。

方式1：双向数据绑定（模板驱动表单，适合简单场景） #

步骤1：修改HTML模板 #

给每个单选框添加[(ngModel)]绑定到组件属性，同时设置value为单选框的ID：

<div class="section team_strength">
    <h3 class="team-heading">Team Strength:</h3>
    <div class="team-wrapper">
        <div class="input-wrapper">
            <input type="radio" name="team-strength" id="team-me" class="teamsStrength" [(ngModel)]="selectedTeamId" value="team-me">
            <label for="team-me">Just Me</label>
        </div>
        <div class="input-wrapper">
            <input type="radio" name="team-strength" id="team-one_five" class="teamsStrength" [(ngModel)]="selectedTeamId" value="team-one_five">
            <label for="team-one_five">1 - 5</label>
        </div>
        <div class="input-wrapper">
            <input type="radio" name="team-strength" id="team-five_thirty" class="teamsStrength" [(ngModel)]="selectedTeamId" value="team-five_thirty" checked>
            <label for="team-five_thirty">5 - 30</label>
        </div>
        <!-- 其余Team Strength选项按相同逻辑修改 -->
    </div>
</div>
<div class="section company_strength">
    <h3 class="company-heading">Company Strength:</h3>
    <div class="company-wrapper">
        <div class="input-wrapper">
            <input type="radio" name="company-strength" id="company-one_five" class="companyStrength" [(ngModel)]="selectedCompanyId" value="company-one_five">
            <label for="company-one_five">1 - 5</label>
        </div>
        <!-- 其余Company Strength选项按相同逻辑修改 -->
    </div>
</div>

步骤2：组件类定义绑定属性 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 初始值对应默认选中的单选框
  selectedTeamId = 'team-five_thirty';
  selectedCompanyId = '';

  loadDataForNextTab() {
    // 直接获取选中的ID
    console.log('选中的Team Strength ID:', this.selectedTeamId);
    console.log('选中的Company Strength ID:', this.selectedCompanyId);
    // 后续业务逻辑
  }
}

方式2：响应式表单（FormGroup，适合复杂表单场景） #

支持表单验证、状态监听等进阶功能，适合表单逻辑复杂的场景。

步骤1：导入响应式表单模块 #

在组件所属的模块中导入ReactiveFormsModule：

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他模块
    ReactiveFormsModule
  ]
})
export class YourModule { }

步骤2：修改HTML模板 #

用formGroup和formControlName绑定表单控件：

<form [formGroup]="strengthForm">
    <div class="section team_strength">
        <h3 class="team-heading">Team Strength:</h3>
        <div class="team-wrapper">
            <div class="input-wrapper">
                <input type="radio" name="team-strength" id="team-me" class="teamsStrength" formControlName="teamStrength" value="team-me">
                <label for="team-me">Just Me</label>
            </div>
            <div class="input-wrapper">
                <input type="radio" name="team-strength" id="team-one_five" class="teamsStrength" formControlName="teamStrength" value="team-one_five">
                <label for="team-one_five">1 - 5</label>
            </div>
            <div class="input-wrapper">
                <input type="radio" name="team-strength" id="team-five_thirty" class="teamsStrength" formControlName="teamStrength" value="team-five_thirty" checked>
                <label for="team-five_thirty">5 - 30</label>
            </div>
            <!-- 其余Team Strength选项按相同逻辑修改 -->
        </div>
    </div>
    <div class="section company_strength">
        <h3 class="company-heading">Company Strength:</h3>
        <div class="company-wrapper">
            <div class="input-wrapper">
                <input type="radio" name="company-strength" id="company-one_five" class="companyStrength" formControlName="companyStrength" value="company-one_five">
                <label for="company-one_five">1 - 5</label>
            </div>
            <!-- 其余Company Strength选项按相同逻辑修改 -->
        </div>
    </div>
    <div class="section bottom">
        <div class="button-wrapper">
            <button class="btn btn-danger butn butn-next" (click)="loadDataForNextTab()">Next</button>
            <button class="btn butn butn-skip">Skip for now</button>
        </div>
    </div>
</form>

步骤3：组件类创建FormGroup #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  strengthForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit(): void {
    this.strengthForm = this.fb.group({
      teamStrength: ['team-five_thirty'], // 初始默认值
      companyStrength: ['']
    });
  }

  loadDataForNextTab() {
    const selectedTeamId = this.strengthForm.get('teamStrength')?.value;
    const selectedCompanyId = this.strengthForm.get('companyStrength')?.value;
    console.log('选中的Team Strength ID:', selectedTeamId);
    console.log('选中的Company Strength ID:', selectedCompanyId);
    // 后续业务逻辑
  }
}

• 当前方案功能可行但不推荐，属于Angular中不提倡的DOM操作方式
• 优先选择「双向数据绑定」（简单场景）或「响应式表单」（复杂场景），它们更符合Angular的设计模式，代码更易维护、测试，且能避免DOM操作带来的潜在问题

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