0

I've this component template

<!-- Some initial page code -->
<sm-modal title="Create new movement" icon="exchange" #editStorageModal>
  <modal-content>
    <form class="ui form error" (ngSubmit)="saveEdit()" #editStorageModalForm="ngForm">
      <!-- Other stuff -->
      <table class="ui celled table">
        <thead>
          <tr>
            <th>Product</th>
            <th>Amount changed (negative for removals)</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let movement of currentStorageMovement.storage_product_movements; let i = index; trackBy:customTrackBy">
            <td>
              <sm-select [(model)]="movement.product_id" placeholder="Select product..." class="fluid search" [ngClass]="{loading: loadingProducts}">
                <option *ngFor="let product of products" value="{{product.id}}">{{product.name}} - {{product.supplier?.name}}</option>
              </sm-select>
            </td>
            <td>
              <div class="field" [ngClass]="{error: formErrors.storage_product_movements && formErrors.storage_product_movements[i]?.amount}">
                <input type="number" step="1" placeholder="Amount" [(ngModel)]="movement.amount" name="amount">
              </div>
            </td>
            <td>
              <a class="clickable" (click)="deleteProductMovement(i)"><i class="trash icon"></i></a>
            </td>
          </tr>
          <tr *ngIf="(!storageMovements || !storageMovements.length) && !loading"><td colspan="3" class="center aligned">No storage movements yet...</td></tr>
          <tr *ngIf="loading"><td colspan="3"><div class="ui active centered inline loader"></div></td></tr>
        </tbody>
      </table>
      <div class="ui button primary" (click)="addNewProductMovement()">New product movement</div>
    </form>
  </modal-content>
  <modal-actions>
    <div class="ui button red" (click)="closeEdit()">Abort</div>
    <div class="ui button green" (click)="editStorageModalForm.ngSubmit.emit()" [ngClass]="{loading: submitting}">Save</div>
  </modal-actions>
</sm-modal>

when I have 2 elements in currentStorageMovement.storage_product_movements one with amount 2 and the other with amount 3 angular displays 2 inputs with both having 3 as value.

Using Augury I can se the array elements have correctly 2 and 3 as values, the input element with 3 (the one that should be 2) instead has these properties:

NgModel
  value:  3
  viewModel:  2

so somehow ngModel knows the value but displays something else in the input value

For reference, the modal code is this

Update: after cloning the same template outside the modal, I can see that the input outside the modal is correct, the one inside is wrong, could be because the modal uses jquery to move the dom from my template to outside the app dom element to have correct styling/positioning?

  • 2
    Each of the input elements has the same name attribute, which is normally supposed to be unique. Maybe that's messing things up? – Douglas Oct 23 '16 at 4:30
  • You're the man, if you want explain that in an answer showing a way to assign an unique name based on index and I'll mark as an accepted answer – alex88 Oct 23 '16 at 4:38
2

Each of the input elements has the same name attribute, which is supposed to be unique. To give each input element a unique name, you can use a {{ }} expression in its value with i as part of the expression. For example {{ "amount" + i }}.

|improve this answer|||||
  • Thanks for this really helpful answer! :) Example: You could put "let i = index" in a ngFor Loop. Then access {{i}} in your html code. – Bluesight Dec 16 '16 at 8:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.