javascript - 需要帮助构建 radio 输入列表的 react 形式

Question

我想用响应式(Reactive)表单来实现我的选择，我对此很陌生，所以这是我的代码:

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

这是我的工作 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>

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

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

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