web-dev-qa-db-fra.com

Comment obtenir la valeur d'un groupe formBuilder imbriqué

Mon formulaire imbriqué est actuellement formaté de cette façon:

this.form = this.formBuilder.group({
      user:  this.formBuilder.group({
        id: ['', Validators.required],
        name: ['', Validators.required],
        phone: ['', Validators.required]
      })
})

J'accède généralement à la valeur comme ceci:

let userID = this.Form.controls['id'].value;
let userName = this.Form.controls['name'].value;
let userPhone = this.Form.controls['phone'].value;

mais parce que les formGroups sont imbriqués, je ne sais pas comment accéder aux valeurs imbriquées. J'ai essayé:

let userName = this.Form.controls['user'].name;

Quelle est la syntaxe correcte pour accéder à une valeur de contrôle de formulaire dans un groupe de formulaires imbriqué? Merci

10
Xenohs

J'ai pu accéder à la valeur en procédant comme suit:

let userName = this.Form.controls['user'].value.name;

ou

let userName = this.Form.get(['user','name']).value;

Soit on travaille.

14
Xenohs

À partir de Angular 4+, vous pouvez effectuer les opérations suivantes:

const userName = this.form.get('user.name').value

En fait, vous pouvez l'enchaîner sur toute la longueur de votre formulaire imbriqué, par exemple:

this.form = this.formBuilder.group({
      parent:  this.formBuilder.group({
               child: this.formBuilder.group({
                      grandChild: this.formBuilder.group({
                                  grandGrandChild: ['',Validators.required],
                            }), 
                      }), 
               }),
})

Et puis accédez à la valeur comme ceci:

this.form.get('parent.child.gradChild.grandGrandChild').value

5
Meta Pakistani

Cela ne fonctionne pas dans Angular 6+

this.form.get(['person', 'name']);

Mais vous pouvez utiliser

this.form.get('name').value;

Je ne sais pas pourquoi la première variante ne fonctionne pas pour moi, car dans la documentation, nous pouvons voir que la méthode get attend un tableau de ..

get(path: Array<string | number> | string): AbstractControl | null

Je suis vraiment désolé pour mon erreur, vous pouvez utiliser quelque chose comme ça pour obtenir de la valeur du contrôle imbriqué:

this.layerSettingsForm.get('name.styleName').value;
3
Vladrimir Eryign

Essayer:

let userId = this.form.value.id
2
rtn

Ancien poste, mais vient de trouver une solution différente.

let userName = (this.Form.controls['user'] as FormGroup).controls['name'].value;

Si l'utilisateur n'est pas défini ou null, userName sera également null sur le résultat et ne se bloquera pas.

1
Jordec

Cela a fonctionné pour moi

form.controls['workWeek'].value.dayGroup.fridayAM
0
apero

essaye ça

const formValue = this.form.controls.user.controls;
let userId = formValue.id.value;
let userName = formValue.name.value;
let userPhone = formValue.phone.value;

cette idée fonctionne essentiellement pour toutes les formes imbriquées

0
Manav Kothari