需要帮助建立无线电输入列表的反应形式

Question

我想用响应式表单来实现我的选择，我是新手，所以这是我的代码：

我已经尝试使用文档和提供的示例来实现它，但是没有运气并且破坏了我的单选单选按钮选择输入。我需要在我的 .ts 文件和我的 html sn-p 中实现什么来实现这一点？

这是我的工作 HTML 片段：

<div *ngFor="let stream of myList">
    <label>
      {{ stream.sys }}
    </label>
    <p *ngFor="let type of stream.types">
      <tr>
        <input type="radio" name="nav"/>
        {{ type.type.label }}
      </tr>
    </p>
  </div>

我正在使用输入类型单选循环遍历外部列表和内部列表。一切正常。现在我想将它实现为反应形式：

这是我想要的输出，例如：

Test
 o Number 1
Test2
 o Number 10
 o Number 20
Test3
 X Number 100

Value: Number 100 // or some id i have in my input data -> type.type.id

此导航需要选择一个项目，并且我想在我的列表中显示表单值作为第一步。

我尝试过这样的事情：

.html

<form [formGroup]="form">
  <div *ngFor="let stream of myList">
    <label>
      {{ stream.sys }}
    </label>
    <p *ngFor="let type of stream.types">
      <tr>
        <input type="radio" name="name" formControlName="name" />
        {{ type.type.label }}
      </tr>
    </p>
  </div>
</form>

<p>
    Value: {{ form.value | json}}
</p>

.ts

form: FormGroup;
constructor(private formBuilder: FormBuilder) {
  this.form = formBuilder.group({
    name: ['']
  });

Answer 1

1. 您在 myList 上的循环。 formBuilder 应该包含一组组。每个组都应该包含一个“名称”控件。不应该需要“价值”。如果你想预设一些东西，你可以在表单生成器中设置它。
2. 这与问题无关，但我不认为<tr> 在<p> 中不正确。相反，您可以只在 div 而不是段落上添加循环，然后删除 tablerow