[Angular 4] Ajouter ligne de formulaire dynamiquement
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 :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <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...
