Angular: Ajouter ligne de formulaire dynamiquement

Fermé
josep-t Messages postés 1 Date d'inscription jeudi 6 juillet 2017 Statut Membre Dernière intervention 12 avril 2018 - 12 avril 2018 à 11:15
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 13 avril 2018 à 20:09
Bonjour,
Je débute avec Angular 4 sur une application Web RestFull. Côté client (Angular donc), je veux construire un formulaire html qui contiendra un tableau de données. Les données de ce formulaire, une fois remplies, feront l'objet d'une requête Http, et seront envoyées au serveur Java (format JSON) probablement sous la forme d'un tableau d'objets. Chaque ligne de ce tableau représente un article avec ses caractéristiques (30 colonnes environ), il y aura donc autant d'inputs que de colonnes. Chaque client pourra rentrer les caractéristiques de ses articles, et peut choisir d'ajouter un ou plusieurs articles pour construire sa "table d'articles". C'est ce tableau d'articles complet qui sera soumis et renvoyer au serveur. Nous ne savons pas à l'avance combien de lignes, c'est à dire d'articles, comportera ce tableau. Je souhaiterai alors créer un simple bouton qui incrémente dynamiquement le nombre de lignes dans ma table. La nouvelle ligne créée sera alors un nouveau formulaire vide avec ses colonnes prêtent à être remplis.
Ci-dessous, voici à quoi ressemble le template de mon component :

<form (ngSubmit) = "function()" [formGroup] = "MyFormGroup" >
<table cellspacing="10" id="addArticles">
<thead>
<tr>
<th></th>
<th></th>
....
</tr>
</thead>
<tbody>
<tr class="article">
<td><input formControlName="FirstCol" type="text" name="article[1][col1]"/> </td>
<td><input formControlName="SecondCol" type="text" name="article[1][col2]"/></td>
.....
</tr>
<tr class="article">
<td ...> </td>
<td ...> </td>
</tr>
.....
<button type = "submit">Valider</button>

</tbody>
</table>
</form>


Je me suis dit que la classe "article" définie pour la ligne du tableau pourrait éventuellement m'être utile? De plus, comment formControlName sera-t-il défini lors de la création d'une nouvelle ligne?

Merci pour votre aide...

1 réponse

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
13 avril 2018 à 20:09
0