How do I get the value of a nested formBuilder group

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.

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;

Try:

let userId = this.form.value.id

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