Angular2 ngModel à l'intérieur de ngFor (Données non contraignant sur entrée)

C'est mon Angular2 application avec des champs de saisie à l'intérieur de la table. Mes données est l'affichage sur select tag, mais les données liées à l'aide ngModel sur input balise n'est pas affichée dans input champ. 

<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>
  • Pourriez vous s'il vous plaît supprimer l'id de votre balise d'entrée, il en résulte de multiples éléments dans le DOM avec le même id puisque vous êtes en cours d'exécution à l'intérieur d'une boucle for. Et pourquoi ne pas utiliser item.lastname et item.middlename au lieu de item[in].lastname
  • Je suis sûr que vous devez avoir importé FormsModule dans votre composante.
InformationsquelleAutor Ashwath S H | 2016-09-05
  1. 76

    Lors de la création de plusieurs ngModel de contrôle à l'intérieur ngFor boucle assurez-vous de donner à chacun de contrôle unique name:

    <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>
    InformationsquelleAutor Yaroslav Stavnichiy
  2. 0

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

    P. S. assurez-vous de savoir ce que l'option individuelle est https://angular.io/api/forms/NgModel#options

    InformationsquelleAutor Ed Kolosovsky