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

Question

I want to realize my selection with reactive Forms, i am new to this so here is my code:

I already tried to implement it with the documentation and the provided examples, but with no luck and destoying my single select radio button selection input. What do i need to implement in my .ts file and here in my html snippet to realize that?

Here is my working HTML Snippet:

<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>

I am looping over the outer list and the inner list with input Type radio. Everything works fine. Now i want to implement it to be Reactive Forms:

This is my desired Output for example:

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

This navigation needs to be a select of one item and i want to show the form value unter my list as first step.

I tried something like this:

.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. Your looping on myList. The formBuilder should contain an array of groups. And every single group should contain a 'name' control. 'value' should not be needed. And If you want to preset something you can set it in the formbuilder.
2. This is not related to the problem but I dont think the <tr> is incorrect in a <p> . Instead you could just add the loop on a div instead of a paragraph and then remove the tablerow