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
  • 2
    Each of the input elements has the same name attribute, which is normally supposed to be unique. Maybe that's messing things up? Commented Oct 23, 2016 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 Commented Oct 23, 2016 at 4:38

1 Answer 1

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 }}.

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for this really helpful answer! :) Example: You could put "let i = index" in a ngFor Loop. Then access {{i}} in your html code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.