Question

我有一个看起来像这样的值列表：

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无线电组件的source code，它们基本上在列表/组模型中具有一个属性，该属性会在输入时随当前无线电值更新更改。因此，如果我想做类似的事情，就必须像这样更改我的数据结构：

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

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

如何在Angular中创建可用于反应式表单的无线电组件？

0 个答案: