I am writting code for an Angular application and I have the need to manage radio buttons individually from a list of "platforms".

"platform" is an interface with several properties, one of them represent the status of the platform which could be one of three 'done', 'pending', 'unassigned'.

I have the array of platforms and in the template I render each platform, initially the default value for the radio is well setted to 'unassigned', but when I change it, even if the property is updated individually only for the platform-item, visually all the platforms change the value.

screenshot

I am using the [(ngModel)] binding and for the checkbox (isENGCam) is working as I expect, that is if I check one checkbox only this checkbox is marked, but for the radio element I experience a strange behavieur.

component

...
platformPositions: Array<Position> = [];
...
...
...
    for (let i = 0; i < _positions; i++) {

      let _position = {
        id: i,
        isENGCam: false,
        booker: '-',
        cameraNumber: '',
        comments: '',
        status: 'unassigned',
        sap: '-'
      }

      this.platformPositions.push(_position);
    }
...
...
...

template

...
<div *ngFor="let position of platformPositions; let i = index">
...

 <span class="bold">Status</span>{{position.status}}<br>
 <div class="ml-2">
  <input type="radio" [(ngModel)]="position.status" ng-checked='position.status==completed' value="completed"><span class="ml-1">Completed</span>{{position.status=='completed'}}<br>
  <input type="radio" [(ngModel)]="position.status" ng-checked='position.status==pending' value="pending"><span class="ml-1">Pending</span>{{position.status=='pending'}}<br>
  <input type="radio" [(ngModel)]="position.status" ng-checked='position.status==unassigned' value="unassigned"><span class="ml-1">Unassigned</span>{{position.status=='unassigned'}}
 </div>
...

</div>

Looking at the pasted image I expect only red highlighed is updated but others radio buttons remains with its value.

It is very strange to me that the value of the property for other platform-items are kept, but visually the option selected is changed.

1 Answers

0
manou On

Following the comment from @JB Nizet, here is the code change which make it work as I expect:

<span class="bold">Status</span><br>
<div class="ml-2">
<input type="radio" name="status-{{ i }}" [(ngModel)]="position.status" value="completed"><span class="ml-1">Completed</span><br>
<input type="radio" name="status-{{ i }}" [(ngModel)]="position.status" value="pending"><span class="ml-1">Pending</span><br>
<input type="radio" name="status-{{ i }}" [(ngModel)]="position.status" value="unassigned"><span class="ml-1">Unassigned</span>
</div>