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?
inputelements has the samenameattribute, which is normally supposed to be unique. Maybe that's messing things up?