带有输入的表位于表单内时的问题

Question

我正在构建一个 Angular 应用程序PrimeNG。我有一个包含带有输入（数量和价格）的 p 表（产品列表）的表单，当我从对话框中选择第一个产品并输入输入（数量和价格），然后选择第二个产品时，我输了输入的第一个产品的第一个数量和价格。

仅在将带有输入的表格放入表单时才会发生此问题。有没有正确的方法来解决这个问题？我的代码如下。

HTML：

<form #form="ngForm" (ngSubmit)="valider(form)">

  <p-table [value]="object.produits" >
    <ng-template pTemplate="header">
      <tr>
        <th>Code Produit</th>
        <th>Quantité</th>
        <th>Price</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-produit>
      <tr [pSelectableRow]="produit">
        <td>{{produit.codeProduit}}</td>
        <td>
          <input type="text" size="10" pInputText name="quantite" [readonly]="action=='show'" pKeyFilter="num" [ngModel]="produit.quantite" (ngModelChange)="produit.quantite = $event;">
        </td>
        <td>
          <input type="text" size="10" pInputText name="prixUnitaire" [readonly]="action=='show'" pKeyFilter="num" [ngModel]="produit.prixUnitaire"(ngModelChange)="produit.prixUnitaire = $event;">
        </td>
      </tr>
    </ng-template>
    <ng-template pTemplate="summary">
      <button type="button" (click)="showDialogProduit()" pButton label="Ajouter Produit"></button>
    </ng-template>
  </p-table>


</form>



<p-dialog header="Liste des produits" [(visible)]="dialogProduit" >
  <p-table #dt_produits [value]="produits" selectionMode="multiple" [(selection)]="operationCommodities.produits" >
    <ng-template pTemplate="header">
      <tr>
        <th>Code</th>
        <th>Désignation</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-produit>
      <tr [pSelectableRow]="produit">
        <td>{{produit.codeProduit}}</td>
        <td>{{produit.designation}}</td>
      </tr>
    </ng-template>

    <ng-template pTemplate="summary">
      <button pButton type="button" label="Terminer" (click)="closeDialogProduit()"></button>
    </ng-template>
  </p-table>
</p-dialog>

TS：

showDialogProduit() {
this.dialogProduit = true;
}

closeDialogProduit() {
this.dialogProduit = false;
}

Stackblitz 演示：

https://stackblitz.com/edit/primeng-tablebasic-demo-a7bdgm?file=src%2Fapp%2Fapp.component.html

Answer 1

问题是输入字段没有唯一的名称，这会扰乱ngModel指令的工作方式。当我如下更新代码时，它被修复了。请注意，[name]两个输入字段的属性都是基于produit.codeProduit

<tr [pSelectableRow]="produit">
  <td>{{produit.codeProduit}} </td>
  <td>
    <input type="text" size="10" pInputText [name]="'quantite_' + produit.codeProduit" [readonly]="action=='show'" pKeyFilter="num" [ngModel]="produit.quantite" (ngModelChange)="produit.quantite = $event;">
  </td>
  <td>
    <input type="text" size="10" pInputText [name]="'prixUnitaire_' + produit.codeProduit"  [readonly]="action=='show'" pKeyFilter="num" [ngModel]="produit.prixUnitaire"(ngModelChange)="produit.prixUnitaire = $event;">
  </td>
</tr>

请使用更新的代码检查Forked stackblitz。

顺便说一句，我建议您更改您的实现以使用Angular Reactive Forms而不是ngModel;