Angular响应式表单中多单选按钮实现与数据绑定问题

我帮你整理了一个完全符合需求的实现方案，解决你之前遇到的单选按钮不显示以及绑定产品对象的问题：

1. 组件类代码（.ts文件） #

首先在组件里定义产品列表，用FormControl来管理选中的产品：

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

@Component({
  selector: 'app-product-radio',
  templateUrl: './product-radio.component.html',
  styleUrls: ['./product-radio.component.css']
})
export class ProductRadioComponent implements OnInit {
  // 产品列表（实际从API获取）
  productList = [
    { productId: "104", productName: "computer" },
    { productId: "105", productName: "Sports" },
    { productId: "106", productName: "TV" }
  ];

  // 用于绑定选中产品的FormControl
  selectedProduct = new FormControl<any>(null);

  ngOnInit(): void {
    // 页面加载时默认选中"Sports"产品
    const defaultProduct = this.productList.find(item => item.productName === 'Sports');
    if (defaultProduct) {
      this.selectedProduct.setValue(defaultProduct);
    }

    // 监听选中变化，测试是否能拿到完整产品对象
    this.selectedProduct.valueChanges.subscribe(product => {
      console.log('选中的产品：', product);
    });
  }
}

2. 模板代码（.html文件） #

在模板里遍历产品列表生成单选按钮，注意name属性要统一才能实现互斥选择，[value]绑定整个产品对象：

<div class="product-radio-group">
  <div *ngFor="let product of productList" class="radio-item">
    <input 
      type="radio" 
      id="product-{{product.productId}}" 
      name="selectedProduct" 
      [formControl]="selectedProduct"
      [value]="product"
    >
    <label for="product-{{product.productId}}">{{product.productName}}</label>
  </div>
</div>

<!-- 可选：显示选中的产品信息 -->
<div *ngIf="selectedProduct.value" class="selected-info">
  <p>当前选中产品：</p>
  <p>ID: {{selectedProduct.value.productId}}</p>
  <p>名称: {{selectedProduct.value.productName}}</p>
</div>

关键注意点 #

• 单选按钮互斥：所有单选按钮的name属性必须相同，这样才能保证同一时间只能选中一个选项。
• 绑定完整对象：通过[value]="product"直接绑定整个产品对象到单选按钮，这样选中时selectedProduct.value就是完整的产品对象，不需要额外处理。
• 默认选中设置：在ngOnInit中通过find方法找到目标产品，用setValue赋值给FormControl，就能实现页面加载时自动选中。
• 无需FormArray：单选按钮是单一选项，用FormControl即可，不需要用FormArray，这可能是你之前例子无法正常显示的原因之一。

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