ANGULAR 15 REACTIVE : NESTED FORM GROUP

Veröffentlicht am: 17 Juni 2019
auf dem Kanal: Techie Ocean

17,811

187

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

Auf dieser Seite können Sie das Online-Video ANGULAR 15 REACTIVE : NESTED FORM GROUP mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer Techie Ocean 17 Juni 2019 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 17,811 Mal angesehen und es wurde von 187 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!

2,214