J'utilise angulaire 9 et j'essaie d'implémenter un composant qui utilise Formes réactives .
J'ai ce qui suit: p>
Ceci fonctionne, cependant, Vous pouvez voir que les valeurs du groupe de formulaire doivent être dynamiques en fonction des valeurs d'une matrice ( IE P> nominationallof code>). p> nominationALLO code> est un tableau 2 dimensions . P> this.approvalEditForm = new FormGroup({
for (i = 0; i < nominationAllOf.length; i++) {
for (j = 0; j < nominationAllOf[i].length; j++) {
'userName'+i+''+j: new FormControl(nominationAllOf[i].nominationAnyOf[j].name)
}
}
})
}
4 Réponses :
Les travaux suivants (i.e. addControl ):
Il y a un moyen de faire ce travail avec le Formarray. Vous l'avez documenté ici: https: // NetBasal. com / angulaire-réactif-forme-forme-the-ultime-guide-guide-to-formearray-3adbe6b0b61a
Pour votre exemple, cela fonctionnerait comme ceci: P>
this.approvalEditForm = new FormGroup({
userNames: new FormArray([
new FormControl(),
new FormControl(),
new FormControl(),
new FormControl(),
]),
});
Utilisez la notation de support pour créer une clé dynamique.
this.approvalEditForm = new FormGroup({
for (i = 0; i < nominationAllOf.length; i++) {
for (j = 0; j < nominationAllOf[i].length; j++) {
['userName'+i+''+j]: new FormControl(nominationAllOf[i].nominationAnyOf[j].name)
}
}
})
}
Que diriez-vous des éléments suivants:
this.approvalEditForm = new FormGroup(
this.nominationAllOf
.map((x, xi) => x.nominations.map(({ name }, yi) => ({ [`userName${xi}${yi}`]: new FormControl(name) })))
.flat()
.reduce((x, y) => ({ ...x, ...y }), {})
)
Êtes-vous confronté à une erreur dans le code ci-dessus?
Oui, cela ne compile pas. Mais je pense que je peux être en mesure d'utiliser
this.approvalleditform.addcontrol ("nom d'utilisateur", nouveau formulaire ()); .