0
votes

Impossible de définir la variable comme nom FormControl lors de la création d'un formulaire réactif dynamique dans Angular

Je crée une forme réactive dynamique dans Angular. Mais dans le niveau de code ci-dessous, le nom n'est pas accepté car le compilateur ne permet pas de donner une variable à l'intérieur du groupe (). Il n'autorise que des valeurs fixes telles que - état, ville, etc. au lieu de la variable level.name où level est un objet qui a un champ de nom ...

l2.push(this.formBuilder.group({
        **State** : null    --> No compilation error if we give fixed value
     }))

Dans la méthode de groupe, je veux donner le contrôle nom comme variable (niveau.nom). Dans la boucle for, si le niveau est {"name": "State", "id": 2} alors je veux le définir comme ci-dessous,

this.countryNextLevelsBeforeMan.forEach(**level** => {
  let l2 =<FormArray> this.l1FormGroup2.controls["l2"]; 
  l2.push(this.formBuilder.group({
    **level.name** : null   --> compilation error on this line as variable not getting allowed
  }))
});

(au lieu de ' State 'Je veux qu'il soit attribué dynamiquement par level.name car level.name peut être City, Street, etc.)

S'il vous plaît aider !!!

angular angular-reactive-forms formarray reactive-forms

2 commentaires

vous souhaitez définir la clé de contrôle de manière dynamique?

Oui, tu as raison

3 Réponses :

0
votes

Remplacez la ligne ci-dessous par ...

level.name

niveau [nom]

2 commentaires

Ça n'a pas marché. l2.push (this.formBuilder.group ({niveau [nom]: null}))

Faites comme ci-dessous .. this.formBuilder.addcontrol (level [name], new FormControl (null))

1
votes

SuryaN, si vous souhaitez créer un FormGroup avec un "nom FormControl dynamique", utilisez la méthode addControl d'un FormGroup . Je suggère de créer une fonction qui renvoie un formGroup à partir d'un tableau de noms

   const group=this.getFormGroup(this.countryNextLevelsBeforeMan.map(x=>x.name))
   //make what ever you want with the FormGroup

Vous pouvez donc appeler la fonction comme

getFormGroup(names:string[])
{
   const group=new FormGroup({}) //<---create a formGroup empty
   names.ForEach(x=>{
       group.AddControl(x,new FormControl())
   })
   return group;
}

2 commentaires

D'accord. Mais comme je l'ai fait, n'est-il pas possible de définir un nom de contrôle de formulaire dynamique?

Au fait, votre suggestion a également fonctionné. Merci pour la suggestion.

2
votes

Essayez ceci:

this.countryNextLevelsBeforeMan.forEach(level => {
  let l2 =<FormArray> this.l1FormGroup2.controls["l2"]; 
  l2.push(this.formBuilder.group({
    [level.name]: null,
    [level.id]: []
  }))
});

2 commentaires

c'est super! cela a fonctionné, pouvez-vous nous dire pourquoi est-il nécessaire d'utiliser des crochets?

Merci 👍✌ @Tecayehuatl. C'est la syntaxe pour générer une clé dynamique: vérifiez ceci pour plus d'informations: stackoverflow.com/questions/19837916/...