时间戳

首页 > 解决方案 > 如何在 Angular 中创建与反应形式一起使用的无线电组件？

javascript - 如何在 Angular 中创建与反应形式一起使用的无线电组件？

问题描述

我有一个如下所示的值列表：

export interface MyValueListModel {
  values: MyValueModel[];
}
export interface MyValueModel {
  id: string;
  title: string;
  value: string;
  selected: boolean;
}

我有 2 个组件，第一个是提交表单的地方，子组件是无线电组件，我生成的子组件与我拥有的值的数量一样多：

<radio-list>
  <radio-component *ngFor="let valueControl of values.controls" [controlAttribute]="valueControl">
  </radio-component>
</radio-list>

这种方法的问题是每个无线电输入都有不同的控件，这意味着即使我将 name 属性设置为相同，控件仍然表现得像复选框，即使视图仍然表现得像收音机（即只有选定的项目显示为选中）。我有点迷失了解决这个问题的最佳方法，所以我会很感激一些帮助。

更新：

感谢Corné指出，我检查了Angular 的 Material radio 组件的源代码，它们基本上在 List/Group 模型中有一个属性，当输入发生变化时，它会随着当前的 radio 值更新。所以如果我想做类似的事情，我必须像这样改变我的数据结构：

export interface MyValueListModel {
  values: MyValueModel[];
  value: MyValueModel; //new
}
export interface MyValueModel {
  id: string; 
  title: string;
  value: string;
  selected: boolean;
}

这听起来像是一个不错的解决方案，如果我的用例没有更好的选择，我可能会使用它，但是如果有人可以建议另一种专门利用反应式表单的本机功能的解决方案，那就太好了。

标签： javascriptangularangular-reactive-forms

解决方案

推荐阅读