CODEWITHSUNDEEP
angulartwitter-bootstrap-3
koque
koque

Reputation: 2256

Angular 2: Radio button not working as expected

I am creating a table by iterating over items in a shopping cart. For each item, I create a delivery method column of radio buttons that allow the user to select one of three of delivery methods (STORE PICKUP, TRUCK DELIVERY, PARCEL).

The table rows are created, each row has three distinct radio buttons that could be selected. The problem is when a radio button is selected in one row, "STORE PICKUP", for instance, all of the "STORE PICKUP" radio buttons are selected for every row in the table. I expect only the radio "STORE PICKUP" for the the specific row I have chosen to be selected. What am I doing wrong?

<tr *ngFor="let item of cartService.cart.items">
      <td class="lgcol">
        <a [routerLink]="['/product', item.product._id]">
            <img src="..\assets\image\{{getDisplayImage(item.product, item.color)}}" >
            <br/><br/>
            <p>{{item.product.name}}</p>
          </a>
        <p>Item #{{item.product.model}}</p>
      </td>
      <td class="lgcol">
        <p *ngFor="let delivery of dataService.deliveryMethods">
            <input type="radio" name="deliveryMethod" [(ngModel)]="item.deliveryMethod"
              [value]="delivery.value">
            {{delivery.label}}
          </p>
        <br>
      </td>
</tr>

Cart item class:

export class CartItem {
  product: Product;
  quantity: number;
  itemTotal: number;
  color: string;
  protectionPlan: string;
  deliveryMethod: string;
}

Deliver Methods:

deliveryMethods = [
   { value: 'Store Pickup', label: 'Store Pickup' },
   { value: 'Truck Delivery', label: 'Truck Delivery' },
   { value: 'Parcel Shipping', label: 'Parcel Shipping' },    
 ]

Upvotes: 1

Views: 294

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You should assign different name attribute for group of radio button of cart.item. Since you have same name for all of your radio input, they considered as the same.

For solving the issue you could concatenate attribute name with cart.items index like name="deliveryMethod{{i}}" 

<tr *ngFor="let item of cartService.cart.items;let i=index;">
    <td class="lgcol">
        <a [routerLink]="['/product', item.product._id]">
          <img src="..\assets\image\{{getDisplayImage(item.product, item.color)}}" >
          <br/><br/>
          <p>{{item.product.name}}</p>
        </a>
        <p>Item #{{item.product.model}}</p>
    </td>
    <td class="lgcol">
        <p *ngFor="let delivery of dataService.deliveryMethods">
            <input type="radio" name="deliveryMethod{{i}}" 
              [(ngModel)]="item.deliveryMethod" [value]="delivery.value" /> 
            {{delivery.label}}
        </p>
        <br>
    </td>
</tr>

Upvotes: 3

Related Questions