Angular2 ngModel à l'intérieur de ngFor (données non contraignantes en entrée)

Question

Ceci est mon application Angular2 avec des champs de saisie à l'intérieur du tableau. Mes données s'affichent sur la balise select mais les données liées à l'aide de la balise ngModel sur la balise input ne sont pas affichées dans le champ input .

 <form name="userForm">
<table>
<tr *ngFor="let item of itemList; let in =index">
  <td><select><option >{{item.FirstName}}</option></select></td>
  <td><input type="text" id="lastname" name="lastname" [(ngModel)]="itemList[in].lastname"></td>
  <td><input type="text" id="middlename" name="middlename" [(ngModel)]="itemList[in].middlename"></td>
</tr>
</table>
</form>
 

Answer 1

Lors de la création de plusieurs contrôles ngModel dans la boucle ngFor, assurez-vous de donner à chaque contrôle un name unique:

 <form name="userForm">
<table>
<tr *ngFor="let item of itemList; let in = index">
  <td><input type="text" name="lastname-{{in}}" [(ngModel)]="item.lastname"></td>
  <td><input type="text" name="middlename-{{in}}" [(ngModel)]="item.middlename"></td>
</tr>
</table>
</form>
 

Answer 2

Une alternative à la méthode de Yaroslav: définissez [ngModelOptions]="{standalone: true}" à l'entrée

PS assurez-vous de savoir quelle option autonome est https://angular.io/api/forms/NgModel#options