onRowEditInit within Dynamic Editable Primeng table and FormArray isn't working properly

Question

I am trying to create a dynamic table for managing some patient allergies. I am following the example cited in the following link (https://stackblitz.com/edit/primeng-tableedit-demo-bt759u?file=src%2Fapp%2Fapp.component.ts). The only difference is that I am using a FormArray to create rows of allergies dynamically. Below is the sample code for managing my table view :

   <p-table
    [value]="medicalForm.get('allergies')['controls']"
    formArrayName="allergies"
    dataKey="id"
    editMode="row"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>Allergy Type</th>
        <th>Allergy Status</th>
        <th>Allergy Degree</th>
        <th style="width: 8rem"></th>
      </tr>
    </ng-template>
    <ng-template
      pTemplate="body"
      let-allergy
      let-editing="editing"
      let-ri="rowIndex"
    >
      <tr [pEditableRow]="allergy" [formGroupName]="ri">
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown
                [options]="allergyTypes"
                optionLabel="designation"
                [(ngModel)]="selectedAllergyType"
                placeholder="Allergy Type "
                formControlName="type"
                [style]="{ width: '100%' }"
              ></p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{ allergy.value.type.designation }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown
                [options]="allergyStatus"
                optionLabel="designation"
                placeholder="Allergy Status "
                formControlName="status"
                [(ngModel)]="selectedAllergyStatus"
                [style]="{ width: '100%' }"
              ></p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{ allergy.value.status.designation }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown
                [options]="allergyDegrees"
                optionLabel="designation"
                [(ngModel)]="selectedAllergyDegree"
                formControlName="degree"
                placeholder="Allergy degree "
                [style]="{ width: '100%' }"
              ></p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{ allergy.value.degree.designation }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td style="text-align: center">
          <button
            *ngIf="!editing"
            pButton
            pRipple
            type="button"
            pInitEditableRow
            icon="pi pi-pencil"
            (click)="onRowEditInit(allergy)"
            class="p-button-rounded p-button-text"
          ></button>
          <button
            *ngIf="editing"
            pButton
            pRipple
            type="button"
            pSaveEditableRow
            icon="pi pi-check"
            (click)="onRowEditSave(allergy)"
            class="p-button-rounded p-button-text p-button-success p-mr-2"
          ></button>
          <button
            *ngIf="editing"
            pButton
            pRipple
            type="button"
            pCancelEditableRow
            icon="pi pi-times"
            (click)="onRowEditCancel(allergy, ri)"
            class="p-button-rounded p-button-text p-button-danger"
          ></button>
        </td>
      </tr>
    </ng-template>
  </p-table>
  <button
    pButton
    pRipple
    type="button"
    icon="pi pi-plus"
    class="p-button-rounded p-button-text float-right"
    (click)="addAllergy()"
  ></button>

The table is of course encapsulated within a form HTML element and I am binding it to a formGroup named medicalForm.The dropdowns are filled correctly with data fetched from the server. Below is the logic of the function i am calling in my ngOnInit function to initialize my form:

  initializeForm() {
this.medicalForm = this.fb.group({
  language: [""],
  irs: ["", Validators.required],
  handicaps: this.fb.array([this.createHandicap()]),
  allergies: this.fb.array([this.createAllergyRow()]),
});}

And next is the functions I am using to manage my table :

createAllergyRow() {
return this.fb.group({
  type: "",
  status: "",
  degree: "",
}); }

addAllergy() {
this.allergies = this.medicalForm.get("allergies") as FormArray;
this.allergies.push(this.createAllergyRow());}

 onRowEditInit(allergy) {
this.clonedAllergies[allergy.value.id] = { ...allergy }; }

onRowEditSave(allergy) {
delete this.clonedAllergies[allergy.value.id];}

onRowEditCancel(allergy, ri) {}

The problem I am having is whenever I add a row and I try to edit it, all the rows get selected and if i change a value in my dropdown, that value will be applied to all the dropdowns on the same column.

question from:https://stackoverflow.com/questions/66065215/onroweditinit-within-dynamic-editable-primeng-table-and-formarray-isnt-working

Answer 1

Waitting for answers