ANGULAR 15 REACTIVE : NESTED FORM GROUP

In this tutorial, we will see how to create,
1.Nested Form Group
2. How to Access controls in Nested Form Group
In the previous tutorial, we have seen how to create a simple formgroup
eg :
userprofileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
age: new FormControl(''),
email:new FormControl(''),
});
So we will have a nested formgroup named "address"
userprofileForm = new FormGroup({
firstName: new FormControl(''),
lastName: new FormControl(''),
age: new FormControl(''),
email:new FormControl(''),
,
address: new FormGroup({
address1: new FormControl(''),
address2: new FormControl(''),
state: new FormControl(''),
zip: new FormControl('')
})
});
So here we will define the controls in same way in html:
How to Access controls in Nested Form Group :
We can access the formcontrol in the nested FormGroup using :
this.userprofileForm.get(['address','address1']).value
Here userprofileForm is the root formgroup. In the Get method, we will pass the name of the nested formgroup named
'address' and the formcontrol in that formgroup named 'address1'.
We can also do the same thing using,
this.userprofileForm.get('address').get('address2').value
#Angular #Angular 8 #Angular 12 #Angular 13 #Angular 15

[@joaopedromoraes4744]

thanks man, you helped me a lot

[@cartoon-with-kokoro]

very useful! thank you so much.

[@mangeshgurav4776]

Good info. I am having same requirement but with a bit difference. What if my button control is in parent component?

[@akshay.k9853]

Plz make more video

[@tolubrand5330]

Hi sir,
Can u please tell that if we want to enter an integer or a no. As input in the form control then how to do it?
Because by default it takes the string value..

[@techbuzz3869]

If we take an model class, how to add form value diretly to class model

[@hemchandkanamarlapudi5812]

any idea how to disable a particular field in a nested form

[@jesusalfonsovalenzuela9946]

When I use " this.userprofileForm.get(['address','address1']).value" the console throw this error: ERROR TypeError: Cannot read property 'value' of null
if I use "this.userprofileForm.get(['address','address1'])?.value" I get undefined
Help pls

[@andrewoliveira6370]

is there a limit for nested formGroup?

[@Himanshukumar-td7kr]

console.log(this.userprofileForm.get(['address','address1']).value); why its not working in angular 11 when I am trying to get value < Please help me >

[@yuvi777444]

try this console.log(this.userprofileForm.get(['address','address1'])?.value);

[@riwazmaharjan8909]

@@yuvi777444 thnks a lot bro it worked

[@Himanshukumar-td7kr]

console.log(this.userprofileForm.get('address').get('address1').value); it also not working

[@yuvi777444]

try this console.log(this.userprofileForm.get('address')?.get('address2')?.value);