splice function not updating my list properly while removing the records other than the last one

Question

This is my Remove function :

onRemoveTransaction(index : number){
    this.transactionsList.splice(index, 1);
    console.log(this.transactionsList);
}

And my template has :

<tr *ngFor="let transactionDetails of transactionsList; let i=index">

            <td>
              <input type="text" name="trxNumber-{{i}}" value="trxNumber-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.trxNumber" disabled/>
            </td>
            <td>
              <input type="number" name="amountDue-{{i}}" value="amountDue-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.trxAmount"/>
            </td>
            <td>
              <input type="text" name="customer-{{i}}" value="customer-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.customerId" disabled/>
            </td>
            <td>
              <input type="text" name="comments-{{i}}" value="comments-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="transactionDetails.comments"/>
            </td>
            <td>
              <input type="text" name="transactionType-{{i}}" value="transactionType-{{i}}"
                     class="form-control" minlength="1" maxlength="20"
                     [(ngModel)]="receiptType" disabled/>
            </td>
            <td class="text-center">
              <span *ngIf="transactionDetails.id != null; else showRemove">
                 <button type="button" title="Delete" class="btn btn-danger btn-md glyphicon glyphicon-trash text-danger"
                         [disabled]="disablePostBatch" data-toggle="modal"
                         data-target="#deleteTransactionModal" (click)="onDeleteTransaction(transactionDetails)">
                 </button>
              </span>
              <ng-template #showRemove>
                <button type="button" title="Remove" class="btn btn-danger btn-md glyphicon glyphicon-remove text-danger"
                        (click)="onRemoveTransaction(i)">
                </button>
              </ng-template>
            </td>
          </tr>

When I'm removing the last record from the list it is working fine, but If I remove any other records from the middle of the list it breaks and doesn't show the values as attached in the image Also there is a warning in the console as seen in this screenshot.

Answer 1

Removing value="" in the input tag has solved this issue. When you delete the middle records from a list the index moves up.