[FIXED] Angular – Row of Radio Buttons Being Selected Instead of Unique Radio ngFor primeng

Issue

I am working through a project where there are 3 choices and 3 different values for each choice. I am using PrimeNG, and these Radio Buttons are inside of a table with expandable rows (even though it shouldn’t matter too much other than some UI differences).

The values and buttons are stored in an ngFor because there are multiple categories where the buttons are an option.
enter image description here

The problem I am having is that when you select 1 value, the entire row is selected at the same time.
enter image description here

I believe it must have to do with the ngFor and how the data is being displayed/looped on each category.
Each "category" is going to be an object where the appropriate values are part of the object. For example, the object of "Test Category 1" might be:

{
  Option1: 1,
  Option2: 2,
  Option3: 2
}

Where 0 means "none", 1 means "view", and 2 means "edit".

Here is my code of the repeating radio buttons inside the ng-template:

<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
    <tr>
      <td [attr.colspan]="columns.length + 1">
        <div class="perm-grid">
          <div *ngFor="let item of rowData.permissions">
            <h2 style="border-bottom: 1px solid #495057; padding-left: 5px">{{ item.name }}</h2>
            <ul class="perm-list">
              <li class="radio-grid">
                <div class="radio-grid-row">
                  <div style="margin-left: 5px"></div>
                  <div>Option1</div>
                  <div>Option2</div>
                  <div>Option3</div>
                </div>
                <div class="radio-grid-row">
                  <div style="margin-left: 5px">None</div>
                  <p-radioButton name="permission1" [(ngModel)]="item[Option1]" value="0">
                  </p-radioButton>
                  <p-radioButton name="permission2" [(ngModel)]="item[Option2]" value="0">
                  </p-radioButton>
                  <p-radioButton name="permission3" [(ngModel)]="item[Option3]" value="0">
                  </p-radioButton>
                </div>
                <div class="radio-grid-row">
                  <div style="margin-left: 5px">View</div>
                  <p-radioButton name="permission1" [(ngModel)]="item[Option1]" value="1">
                  </p-radioButton>
                  <p-radioButton name="permission2" [(ngModel)]="item[Option2]" value="1">
                  </p-radioButton>
                  <p-radioButton name="permission3" [(ngModel)]="item[Option3]" value="1">
                  </p-radioButton>
                </div>
                <div class="radio-grid-row">
                  <div style="margin-left: 5px">Edit</div>
                  <p-radioButton name="permission1" [(ngModel)]="item[Option1]" value="2">
                  </p-radioButton>
                  <p-radioButton name="permission2" [(ngModel)]="item[Option2]" value="2">
                  </p-radioButton>
                  <p-radioButton name="permission3" [(ngModel)]="item[Option3]" value="2">
                  </p-radioButton>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </td>
    </tr>
  </ng-template>

For simplicity sake, I will provide the rest of the code inside a StackBlitz.

Does anyone know why these are being selected the entire row at a time? Previously, when I selected an option, it wasn’t the entire row, but rather all the categories had the same value. For example, if I selected "View" on Option 2, this would be reflected in all categories.

Solution

Take a look at your option variables value

  Option1: string;
  Option2: string;
  Option3: string;

they are not initialized i.e. equal to undefined. So

item[Option1] == item[Option2] == item[undefined]

This code must work fine:

Option1: string = 'Option1';
Option2: string = 'Option2';
Option3: string = 'Option3';

Answered By – Yan Koshelev

Answer Checked By – David Marino (Easybugfix Volunteer)

Leave a Reply

(*) Required, Your email will not be published