How to select any one radio button in a table row and this should be for all other rows as well. How to do this in angular?

Question

How to select any one radio button in a table row and this should be for all other rows as well. I want the data to be as in the below image.

After using formControlName, the not working as above image.

HTML Code

 <form [formGroup]="feedbackForm" (ngSubmit)="submitData()">
            <table class="res-tbl">
                <tbody>
                    <tr class="skill-tr" *ngFor='let skill of skills; let i = index;'>
                        <ng-container *ngIf="i==i">
                            <td class="table-data res-td" class="skill-td">
                                <b>{{skill.skillName}}
                            </td>
                            <td>
                                <input type="radio" formControlName="radio{{i}}" value="radio{{i}}"> 
                            </td>
                            <td>
                                <input type="radio" formControlName="radio{{i}}" value="radio{{i}}"> 
                            </td>
                            <td>
                                <input type="radio" formControlName="radio{{i}}" value="radio{{i}}"> 
                            </td>
                            <td>
                                <input type="radio" formControlName="radio{{i}}" value="radio{{i}}"> 
                            </td>
                            <td>
                                <input type="radio" formControlName="radio{{i}}" value="radio{{i}}"> 
                            </td>
                        </ng-container>
                    </tr>
                </tbody>
            </table>
            <button>Submit</button>
        </form>

TS Code I have no idea on how to use this in TS file. I tried using like below but not working as I expected.

   this.feedbackForm = this.fb.group({
          radio0:[''],
          radio1:[''],
          radio2:[''],
          radio3:[''],
          radio4:['']
        });

Give the radio buttons, which you want to group, the same `name` property, as it is described [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio). — Geshode, Dec 26 '22 at 06:06
Does this answer your question? [Angular 5 Reactive Forms - Radio Button Group](https://stackoverflow.com/questions/49078286/angular-5-reactive-forms-radio-button-group) — Geshode, Dec 26 '22 at 06:22

Flo · Accepted Answer · 2022-12-26T10:23:19.383

Here is the solution. You set the value to radio[INDEX], too. So all radio buttons has the same value like radio0. So all will be selected if you click one. Change the value like 1, 2, 3... or custom property inside your skills like

skills = [ { skillName: "First", skillValueOne: 1, skillValueTwo: 2 .....} ]

Stackblitz is here to play.

Solution with fixed indexes for values

<hello name="{{ name }}"></hello>
<p>Start editing to see some magic happen :)</p>
<form [formGroup]="feedbackForm" (ngSubmit)="submitData()">
  <table class="res-tbl">
    <tbody>
      <tr class="skill-tr" *ngFor="let skill of skills; let i = index">
        <ng-container *ngIf="i == i">
          <td class="table-data res-td" class="skill-td">
            <b>{{ skill.skillName }}</b>
          </td>
          <td>
            <input type="radio" formControlName="radio{{ i }}" [value]="1" />
          </td>
          <td>
            <input type="radio" formControlName="radio{{ i }}" [value]="2" />
          </td>
          <td>
            <input type="radio" formControlName="radio{{ i }}" [value]="3" />
          </td>
          <td>
            <input type="radio" formControlName="radio{{ i }}" [value]="4" />
          </td>
          <td>
            <input type="radio" formControlName="radio{{ i }}" [value]="5" />
          </td>
        </ng-container>
      </tr>
    </tbody>
  </table>
  <button>Submit</button>
</form>

https://stackblitz.com/edit/angular-ivy-6numkr Here is the code to Stackblitz. It works as well. Only one RadioButton can be checked. I edited my answer with a preview. — Flo, Dec 26 '22 at 10:04
skills = [{ skillName: 'First' }, { skillName: 'Second' }, { skillName: 'Third' }]; So simple add new skills! I have updated the Stackblitz, give it a try again. — Flo, Dec 26 '22 at 10:40

How to select any one radio button in a table row and this should be for all other rows as well. How to do this in angular?

1 Answers1

Linked