Grouping of Form Controls | Reactive Form | Angular 13+

in this lecture you will learn how to group form controls in a reactive form we have already seen how to group form controls in a template driven form there we group form controls in the html file so there we create a container element inside that container element we put all the controls which we want to group together and then on the container element we use the form group directive but in case of a reactive form the grouping of form controls is done in the typescript class let's understand that with an example but before that let me show you how you can add a custom validation error message for a form control so here for this email form control i want to add a custom validation error message let's go to vs code and here we are displaying this email form control after that let me add a div and inside this div let me create a span on this pen let's set some css style so basically i want to set the font color to red and then let's display a custom validation error message and here let's say the email you entered is not a valid email let's go to web page and you will notice that that validation error message is being displayed here now currently this error message is static that means it will always get displayed even if this form control is valid but we only want to display this custom validation error message if this form control is not valid so for that first we will have to get access to this email form control and on that email form control we have the valid property so if that valid property is true then we don't want to display this custom validation error message but if that valid property is false then we want to display this custom validation error message okay so we need to get access to this email form control and for that what we can do is so here we have this reactive form property we are creating this property here and what is it storing it is storing a form group so this reactive form property which is of type form group is going to have a get method okay so here on this span element let's first add ng if okay then let's use this reactive form property which is of type form group and this property is going to have a get method and to this get method we can pass the form control name which we want to access so for this email the form control name is email right so let's pass that value to this get method and in this way we will have access to this email form control now this email form control is going to have a valid property so if this valid property is true we don't want to display this custom validation error message but if it is false then we want to display this custom validation error message so here we also use this not operator before this expression with this let's save the changes let's go to the web page and you will notice that initially this validation error message is being shown here because currently this email form control is invalid but if i go ahead and enter some valid value in this form control that custom validation error message is gone okay so let me also open developer console here let's clear everything and let's click on this submit button so when we are using this get method and when we are passing a form control name here so in this case we are passing this email it is going to return us so here we have this controls property inside this controls we have this email property and if you notice it is a type form control so that get method is going to return us this form control and this form control has a valid property which is currently set to true okay so based on this valid property we are displaying or not displaying the custom validation error message all right now let's talk about how to group form controls together so in this form let's say i want to group this first name last name and email form controls together we can do that in three simple steps the first step will be to move these three form controls this first name last name and email form control in a container element okay so for the container element i'm going to create a new div and inside that div let's move this first name last name and email control so this is the first step the second step is on this development we need to use a directive called form group name and to this we need to assign a form group so let's go to typescript class here now here we have a form group so this reactive form is a form group but this form group is storing all the form controls of our form but what we want is we want to create a form group which will have only first name last name and email controls for that to this object the object which we are passing to this form group constructor let's go ahead and let's create a new property and let's call it personal details you can call this property anything and to this let's assign a new form group and again to the constructor of this form group let's pass an object and inside this object let's specify the form controls which we want to group together here we want to group this first name last name and email form controls together so i will cut it from here and i will paste it inside this form group this nested form group okay and here let's also use a comma so this is the third step and finally let's go ahead and let's assign this personal details property to this form group name directive with this let's save the changes let's go to the web page here we have an error and this error says cannot read property of null that's because here we are trying to access this email form control and here we assuming that this email form control is present in this reactive form form group but if you notice here we have moved this email form control to this personal details form group right it is no more a part of reactive form group it is now a part of personal details form group so this expression here is going to return null because it will not able to find this email form control on this form group and on that null we are trying to call this valid property and that's why we have this error message cannot read properties of null now instead of passing simply this email we need to pass this personal details dot email okay and this will resolve the issue so if i save the changes if i go to the web page you will notice that that error is gone so basically instead of passing simply email since this email is now a part of this personal details form group we are passing personal details dot email so if i submit this form you will notice that this controls has this country gender and hobbies property and it has this personal details property as well which is of type form group and if i expand this personal details property and then its controls you will notice that we have this email property which is of type form control so if i expand this value property so here we have this value property you will notice that this email is now a part of personal details property which is again of type object so that's why we need to access this email on this personal details property okay and you will also notice that this first name last name and email form controls are grouped together inside this personal details form group so i can also show you that here so you can see that country gender and hobbies are separate from controls then we have this personal details property which is a type form group and inside this form group we have this email first name and last name form controls so in this way we can group form controls together in a reactive form now before wrapping up this lecture here if you notice this custom validation error message is being displayed initially when the page loads so if i reload the page you will notice that it is displaying this custom validation error message now this validation error message will be gone if we enter a valid email address in this email control okay so when the form control is valid in that case that custom validation error message is not being displayed now what i also want is initially when the page loads at that time also this custom validation error message should not be displayed it should only be displayed if this form is invalid and if it is touched so again let's go to vs code and let me move this validation error message in a separate line and here let's add one more condition so for that let's use this end operator and let me copy this expression which is going to return us the email form control right so that email form control is also going to have a touched property so if this touched property is true and the form is invalid then only we want to display this custom validation error message okay now if i go to the web page you will notice that initially that custom validation error message is not being displayed but if i touch this form control and if i don't enter any valid value inside this form control in that case that validation error message will be displayed this is all from this lecture thank you for listening and have a great day

Channel: procademy

Views: 15,757

Keywords: form group, reactive form, angular form, angular, angular tutorial, complete angular course

Id: nc8FBBShlYo

Length: 10min 44sec (644 seconds)

Published: Sat Apr 09 2022