使用模态表单提交更新表行

Question

我正在处理表行更新。我有一个带有数据行和编辑按钮的表。当我单击“编辑”按钮时，将打开一个模态窗口，其中包含所有行值。

我的问题是，当我对此模式进行更改时，由于ngModel，行也发生了更改。

即使在模态窗口上进行更改，我也不想更改表数据，然后在“更新”按钮上单击，仅应对其进行更改。

我不确定该如何解决。

请帮助。

<tbody>
    <tr *ngFor="let tableRow of this.tableData">
        <td *ngFor="let tableHeader of this.tableFieldOrder">{{tableRow[tableHeader]}}</td>
        <td class="btn-edit"><a (click)="editPopUp(tableRow)">Edit</a></td>
    </tr>
</tbody>

<app-dialog [showDialog]="modalOn" [titleText]="modalTitle" [hideNegative]="true" [hidePositive]="true"
(closeButtonClicked)="this.resetModal()" [level]="1">
<h4>Product Detail</h4>
<form [formGroup]="maintenanceProductTargetForm" *ngIf="maintenanceProductTargetForm"
    (ngSubmit)="editMaintenanceProduct(maintenanceProductTargetForm.value)">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th scope="col">Product Code Clip</th>
                <td>
                    <input 
                        type="text" 
                        class="form-control" 
                        formControlName="product_code" 
                        name="product_code_clip"
                        placeholder="Enter Product Code Clip" 
                        [(ngModel)]="editProductData.product_code" />
                </td>
            </tr>
        </thead>