Saturday, 22 August 2020

Issue when Table with Inputs is inside of a Form

i'm building an Angular application with PrimeNG, i have a form that contains a p-table (list of products) with inputs (quantity and price), when i select the first product from a dialog and enter the inputs (quantity and price), then select a second product, i lose the first quantity and price that enter for the first product.

This issue only happend when put the table with inputs inside of the form, is there a right way to resolve this, below is my code :

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></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></td>
        <td></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;
}


from Issue when Table with Inputs is inside of a Form

No comments:

Post a Comment