angular


Angular 2 not showing correctly values in input


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

Related Links

The new Router Component for Angular2 does not seem to have provision for templateUrl .
Using Angular 2 Material 2 Alpha 5 with Angular 2 RC 2
FormControl in Angular 2
Angular2 http json request
Angular 2 John Papas' Seed Project with simple Apache Server
Angular2 is converting an Array to String
Show page not found in Angular2
Angular2 SELECT OPTION after pipe executes
Angular2 - EXCEPTION: TypeError: Cannot read property 'screen' of undefined
Angular 2: onChanges() is not reflecting Object value changes
How to call ViewChild in runtime?
Angular2 not detecting change to object value
Getting values of looped template using angular2 forms
Breeze and Angular2
Angular 2 hide/show template
Angular 2 RC1 - Auto import all used components inside a base component

Categories

HOME
dropbox-api
alexa
knn
properties
owasp
linux-device-driver
graph-algorithm
instagram-api
geogebra
distributed-database
outlook-redemption
rhel
interaction
m3u8
jlabel
junit4
jquery-gmap3
couchbase-view
mysql-error-1064
ssis-2008
jsdata
gembox-document
oracle-data-integrator
github-api
webcam
graphic
gtm-database
fread
sublimerepl
puma
appery.io
aspose-cells
free-jqgrid
submenu
citations
userfrosting
ngrx-effects
nerdtree
c#-6.0
maximo-anywhere
khan-academy
dependency-properties
erlang-shell
embedded-javascript
hasownproperty
c#-to-vb.net
google-chrome-arc
spring-social-facebook
audio-player
powershell-tools
leshan
review-board
apple-watch-complication
spoon
grape
ntfs-3g
couchbase-sync-gateway
stage3d
ooyala
ti-nspire
meter
materialized-views
elasticsearch-marvel
qmediaplayer
custom-validators
rich-snippets
dynamicquery
ttml
code-completion
irssi
rot13
ransac
workbench
tankauth
casbah
sandbox-solution
telerik-test-studio
usermode
django-1.2
citrix-access-gateway
scite
gideros
tandem
slimv
mysql-5.0
vp8
wexitstatus
memory-mapped-files
twisted.internet
ext-direct
django-generic-views
openflashchart2
id-generation
windows-2000
itsm
olpc
vmwaretasks
pvcs
task-tracking

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App