CODEWITHSUNDEEP
formsangulartypescript
Xenohs
Xenohs

Reputation: 641

How do I get the value of a nested formBuilder group

My nested form is currently formatted in this way: 

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

I would usually access the value like this: 

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

but because the formGroups are nested, I'm not sure how to access the nested values. I tried:

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

What's the correct syntax for accessing a form control value in a nested formGroup? Thanks

Upvotes: 25

Views: 63831

Answers (8)

Lukas Coorek
Lukas Coorek

Reputation: 227

In Angualr 8, in the HTML template:

form.get('user').get('id')

Upvotes: 1

Jordec
Jordec

Reputation: 1564

Old post, but just found a different solution.

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

If user is undefined or null, userName will also be null on result and not crash.

Upvotes: 2

apero
apero

Reputation: 1154

This worked for me

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

Upvotes: 1

Manav Kothari
Manav Kothari

Reputation: 1149

try this

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

this idea basically works for any nested forms

Upvotes: 0

Vladrimir Eryign
Vladrimir Eryign

Reputation: 123

This is doesn't work in Angular 6+

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

But you can use

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

I don't know why the first variant doesn't work for me, because in the documentation we can see that the get method expects an array of ..

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

I am so sorry for my mistake, you can use something like this to get value from nested control:

this.layerSettingsForm.get('name.styleName').value;

Upvotes: 5

Metabolic
Metabolic

Reputation: 2904

As of Angular 4+ you can do the following:

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

In fact, you can chain it up through the whole length of your nested form e.g:

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

And then access the value like this:

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

Upvotes: 11

Xenohs
Xenohs

Reputation: 641

I was able to access the value by doing the following: 

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

or

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

Either one works.

Upvotes: 32

rtn
rtn

Reputation: 2034

Try:

let userId = this.form.value.id

Upvotes: 2

Related Questions