How to use ngModel in the radio group from the api in angular

Question

here's the code.

list.component.html

<form nz-form [formGroup]="taskFormGroup" (submit)="saveFormData()">
    <div nz-row *ngFor="let remark of checklist">
              <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
                <div nz-row nzGutter="6" nzType="flex" nzAlign="middle" style="border-left: 5px solid rgba(167, 0, 51, 0.5);">
                  <div nz-col nzSpan="8">
                    <label [textContent]="task.name"></label>
                  </div>
                  <div nz-col nzSpan="8">
                    <nz-form-item>
                      <nz-form-control>
                        <nz-radio-group formControlName="radiostatus" [(ngModel)]="radio" (ngModelChange)="onChangeStatus($event)">
                          <label nz-radio nzValue="passed">Passed</label>
                          <label nz-radio nzValue="failed">Failed</label>
                        </nz-radio-group>
                      </nz-form-control>
                    </nz-form-item>
                  </div>
                </div>
              </div>
            </div>
  </form>

list.component.ts

checklist = [
    {
      "id": "txv3vvBr8KYB",
      "assetType": {
        "id": "1fKBO4w0XHg7H",
        "code": "PRD",
        "name": "Printing1"
      },
      "tasks": [
        {
          "id": "1fKBO4w0XHg7H",
          "name": "Task 1",
          "description": "Check oil spill"
        },
        {
          "id": "ESOSA6aCrOER",
          "name": "Sample1",
          "description": "Desc1"
        }
      ]
    },
    {
      "id": "EwQciw9whx6B",
      "tasks": [
        {
          "id": "1nU7uASqfvLPD",
          "name": "TASK8888",
          "description": "DESC8888"
        },
        {
          "id": "EwQciw9whx6B",
          "name": "TASK9999",
          "description": "DESC9999"
        }
      ]
    }
  ];

When selecting on the passed or failed, when it select on the 1st item it shouldn't affect the 2nd item. for example on the 1st item, it select the passed in the second item it shouldn't select the passed on the second.

on my part when I select the passed on the first item, it affect the second item which it select also the passed.

Answer 1

In your code you have same ngModel binding mame for all form control. Try to assign unique name

component.html

<div nz-row *ngFor="let remark of checklist; let  i = index">
      <div nz-col nzXXl="12" *ngFor="let task of remark.tasks" style="padding: .5rem;">
        <div nz-row nzGutter="6" nzType="flex" nzAlign="middle" style="border-left: 5px solid rgba(167, 0, 51, 0.5);">
          <div nz-col nzSpan="8">
            <label [textContent]="task.name"></label>
          </div>
          <div nz-col nzSpan="8">
            <nz-form-item>
              <nz-form-control>
                <nz-radio-group [(ngModel)]="task.id" (ngModelChange)="onChangeStatus($event)">
                  <label nz-radio nzValue="passed">Passed</label>
                  <label nz-radio nzValue="failed">Failed</label>
                </nz-radio-group>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
      </div>
 </div>

Example