Introduction to Reactive Forms | Angular Concepts made easy | Procademy Classes

hello and welcome to another section of this complete angular course in this section we are going to learn all about reactive forms and let's start this section by understanding what is a reactive form and how to create a reactive form so in the last section we learned about template driven forms and there we learned that when we Define a template driven form everything we do in the view template but in a reactive form we Define the form and the form control Rules by writing some code and that's what we are going to do in this section we are going to create a form by writing some code now you might ask why can't we use a simple HTML form in angular and use it well that's because using angular we create a single page application so there should not be any submitting of form data to the server directly when the submit button in the form is clicked but if we simply use an HTML form in our angular application in that case when the submit button will be clicked in in the form that is going to submit the form by making a new request to the server and when a new request to the server will be made it will reload the page and since using angular we create a single page application that means the whole angular application will be reloaded it will be restarted that's why we need angular's help to avoid the default behavior and not only that angular also makes it easier to read the form Control Data and perform validation on the form controls and many more things when we use template driven approach or reactive form approach now we know that in angular we can create forms using two approaches either by using template driven approach or by using reactive form approach and we have already talked about template driven approach in great detail in our previous section now in this section we will learn how we can create forms and form controls using reactive form approach now when we use reactive form approach we Define the structure of the the form in the component class that means we create the form model with form groups form controls and form arrays in the component class and we also Define the validation rules in the component class Itself by writing some code and then we need to bind the form group and form control which we have created in our component class to the HTML form in the view template and we going to understand this with an example so the difference between a template driven form and a reactive form is that in a template driven form we do most of the things in the view template itself but in a reactive form we create the form group and form control in the component class and then we somehow synchronize it with the HTML form which we have defined in the view template now the advantage of using a reactive form is that since we are going to define the form and form controls by writing some code as a developer we will have more control over how the form and the form control should be displayed and using reactive form approach apprach creating Dynamic controls also becomes easier and when we use reactive form approach unit testing is also easy now the disadvantage of using reactive form is that since we are going to do most of the things by writing some code it is not beginner friendly all right so this was a high level overview of what a reactive form is and what are its advantages and disadvantages now in order to work with reactive form we need to import reactive form modu modules from angular / forms Library so when we work with template driven form there we import forms module from the angular / forms library but when we are working with reactive forms in that case we need to import reactive forms module from angular / forms now let's go ahead and let's see how we can create a reactive form in angular to understand reactive forms here I have created a brand new angular project called angular reactive form now in this project if I open this Source folder there if I go to this app folder here I have not created any other component we only have one component called app component and in the HTML file of that app component I have written some HTML basically here I am defining a form using this form element so keep in mind that even if in a reactive form approach you're going to create a form by writing some code still you need to define the form by using the form element of HTML so here you see I'm using this form element and inside this form element I'm defining some input elements like first name last name email then username date of birth gender Etc and in order to design this HTML in order to design this form I've also written some CSS so this HTML and this CSS you will find with the startup project and the link for the startup project I have already provided in the description okay so if I go to to the web page this is how the form will look like there you will see that we have this first name input element we have this last name input element we have this email input element username date of birth gender street address country City region and postal code so we are going to use this HTML form and we are going to make it a reactive form let's see how we can do that so let's again go back to vs code and as I mentioned earlier in order to work with reactive form the first thing which we need to do is we need to go to app modules and there we need to import reactive form module from angular / forms so this is the first step let's save this file here and let's close this appm module. TS file now in a reactive form we Define the form structure in the component class now we have created the HTML form in the app component. HTML so in the app component class we are going to create a form so here let's create a property let's call it reactive form you can name it anything you can also call it sign up form or registration form but here I'm going to call it as reactive form and the type of this reactive form is going to be form group now in order to work with this form group we also need to import it from angular / forms so let's write that import state M okay all right now here we have this error because here we are not assigning anything to this reactive form property so if you want you can also go ahead and you can assign a new instance of form group to this property okay there you need to pass an object so you can do this assignment here but instead of doing this assignment here I would like to do this assignment inside the NG On in It life cycle Hook when all the properties are initialized okay so for now to avoid this error what I will do is I'll go to TS config.js and there for now I will set this strict property to false let's save the changes let's go back to app component.ts and that error should be gone now we are going to assign this reactive form property with a new instance of form group in the NG on on init life cycle hook for that for this app component we are going to implement on init interface and in order to use this on init interface we also need to import it from angular /co okay now let's go ahead and let's Implement NG on init interface this NG on init life cycle hook and inside that we are going to assign this reactive form with some value so here let's say this do reactive form and to this is we want to assign an instance of form group for that first we need to use new keyword and then we need to call the Constructor of form group and to this Constructor we need to pass an object and inside this object we are going to specify what are the controls we want inside this form group and we going to specify it using key value payer so for example we want a first name form control okay and to this first name we want to assign if form control for that again we will use new keyword and then we are going to call the Constructor of form control and again in order to use this form control we need to import it from angular SL forms and here let's move this UT in this line and let's remove this input statement all right so in this way inside this form group we are creating a form control called first name and to this form control you can also pass the default value which you want to set for that form control So currently I'll pass null you can also pass empty string okay so this will be the default value set for that form control in the same way let's also go ahead and let's define other form controls for example we also want a form control called last name then we also want to form control called email we want to form control called username we want a form control called date of birth we want a form control called street address so I'll simply call it as Street if I go to the web page there you see we have this street we also have this gender form control which we want and we want country City region and postal code so let's also create a form control for gender then we have the form control for street we want a form control for Country we want a form control for City we want a form control for region and finally we also want a form control for postal code so I'll simply call it as postal so these are the form controls which we want in our form okay so to create a form we have used this form group class we are calling it Constructor to that we are passing an object and inside that object we are specifying what are the form controls we want for that form group now you might say in template driven form approach we had an object of type NG form but here in order to create a reactive form we are using form group so why is that well keep in mind that NG form is also a type of form group okay so when we import forms module from angular / forms then whenever it finds a form in the angular application it will automatically make it as template driven form we don't need to explicitly use NG form on that form okay but still that NG form is of type form group that's because a form is nothing but it is a collection of form controls and NG form is also storing a collection of form controls right so NG form is also a form group in the same way when we are using reactive form approach there also we are creating a form group and in that form group we have a collection of form controls all right now here we have defined the form structure now we need to connect this form this reactive form this form Group which you have created here to the HTML form which we have defined in our view template so basically to this form we need to connect this reactive form for that on this form element we need to use a directive and that directive is form group and this G should be caps here and to this form group directive we want to assign this reactive form property so here we need to do property binding for that we will wrap this form group directive within square brackets like this and then to this we will assign this property this reactive form property and in this way now this HTML form is connected with this reactive form form group and we also need to connect these controls to the respective controls in this HTML form so for example we need to connect this first name input element to this first name form control now how are we going to do that for that on each of these form controls we need to use another directive called form control name and to this form control name we need to assign the form control which we want this input element to connect to in this case we want this input element to be connected to this first name form control so let's copy this first name from here and let's assign it here now here notice that we are not doing any property binding so this value will be considered as string value but if we do property binding like this in that case angular will think that this first name is some typescript expression right so when we are doing property binding like this on the directive then we need to wrap this value within single quotes because here we need to specify a string value keep this point in mind but here I will not do property binding I'll simply pass this first name as a a string value to this form control name and it should be form control name and let's go ahead and let's do the same thing on other input elements so we want to connect this last name input element to the last name form control so here we will pass last name so this last name we have a form control inside this form group then we also have this email form control so here in this next line we want to connect this email input element to email form control then we want to connect this username input element to username form control let's do the same thing for other form controls then here for the gender for each of these genders we want to connect it to gender form control so I'll remove this checked from here and here we want to connect this form control this radio button to gender form control let's do the same same thing on other radio buttons and here we don't need this name attribute now okay so I'll remove it from here then let's scroll down here we have this drop- down list so we want to connect this drop- down list to Country form control we want to connect the street address to Street form control then let's scroll down we want to connect this city input element to City form control we want to connect this region input element to region form control and we want to assign this postal code input element to postal form control okay so in this way using this form control name directive we are connecting each of the form controls to the form control which we have defined inside this form form group and in order to connect this form group to the form on that form we are using form group directive so now if we go to the web page now this form is no more just a HTML form now it is a reactive form now if you want to set some default value for some of the fields of this form for example let's say for this gender I want to set the default value as male and for the country I want to set the default default value as India for that let's go back to vs code and if I scroll down here we have the gender radio button this should be male so I want to make this m in caps and Here Also let's make this p in caps all right so if you notice for each of the radio buttons currently we are not providing any value attribute right so let's go ahead and let's provide a value attribute here so the for the male radio button the value should be male for the female radio button the value should be female and for this prefer not to say radio button let's say the value should be other and based on this value we can set a default value so for example we want to make this input element checked by default so we are going to pass this value to the gender control inside this form group so here we have this gender control currently for this gender control we are passing the default value as null but now we want to pass the default value as mail let's save the changes let's go back to the web page and now you will notice that by default mail is selected in the same way for this country dropdown we want the default value to be India so let's go back and here we have our country control there let's specify the default value as India let's save the changes let's go back to the web page and now you'll notice that India is selected by default so in this way you can also set a default value for your form controls now when this form will be submitted as we learned in the template D form approach when a form gets submitted angular raises an event called NG submit and we can listen to that NG submit event and whenever the form will be submitted we can do something so when this button will be CED clicked since the type of this button so if I go to app component. HTML if I scroll down currently the type is button but here let's set it to submit okay so when the type is submit and when the button will be clicked it is going to submit the form and when the form will be submitted in that case NG submit event will happen and we can listen to that NG submit event on this form itself because when the submit button will be clicked the complete form will be submitted so the NG submit event will happen on the form and we are listening to that NG submit event and when this NG submit event happens we want to execute some code so here to this NG submit event let's pass a method let's say on form submitted and inside this on form submitted method let's goad and let's write some logic so let me copy this method name from here in the component class let's create that method so after this NG on in it let's go and let's create this method and in there I'm simply going to use console. log statement and what do I want to log here I want to log this reactive form property so for that I'll simply say this do reactive form so when we were using template driven approach there what we had to do is on the form we had to use a template reference variable and to that template reference variable we assigned Ng form object and then we were accessing that template reference variable using view child decorator and then we were logging that template reference variable but here we don't need to do anything like that here we can simply go ahead and log this reactive form property because it is this reactive form property which is storing our form right so with this let's save the changes let's go to the web page let me open developer console let's go to console tab let me clear everything and when I click on this submit button you will notice that an object of type form group has been logged if I expand this form group object there we should have controls property and if I expand this controls property you will see that we have all our controls which we have defined inside that form group so for example City Country date of birth email first name gender last name postal region Street username Etc and we should also have a value property so here we have our value property if I expand this value property this is an object and in that object with the form control name we have a property name and the value for these properties is the value which we have entered in that form control So currently for these form controls we have not entered any value but for those form controls where we have a default value for example for this gender and for this country form control you will notice that the default values are already set for the gender male is set and for the country India is set so we can use this value property to retrieve the value of each form control from this form let me clear the console here let's go ahead and let's enter some value in these fields and now when I click on this submit button again this form group has been logged if I expand this and if I expand the value property here you will notice that the values which we have entered in these form controls that has been assigned here and in this form group you will also find other properties for example we have this invalid and valid property which tells us whether the form is valid or not we have this dirty property which tells us whether the form is dirty or not then we also have this untouched property and we should also have a touched property so here we have the touched property which tells us whether any form control in this form has been touched or not so the structure of this form group object is very similar to the structure of the NG form object which we learned about in the template driven form approach then for each of these form controls in this controls property this controls property is an object and in that object for each of these form controls a property will be created with the form control name and to that property the form control object will be assigned so for example if I expand any one of these form controls let's say first name there you will see the details related to that form control for example what is the status of that first name form control it is valid whether the form controls value has changed or not if it is changed in that case this pristin will be false and this dirty will be true but if it has not changed in that case this pristine will be true and dirty will be false then we have this value property which stores the value which we have entered inside this form control so in this first name form control we entered this value John and that value you can see it is assigned to this value property all right so in this way using this form group or using this form control object we can retrieve the value which the user has entered inside the form control and if you want to retrieve the value of all of the form controls from the given form in that case you can use the value property of form group all right so in this lecture we learned how we can create a reactive form now in the next lecture let's learn how we can do validation on a reactive form in the last lecture we learned what is a reactive form and how we can create a reactive form now now in this lecture let's learn how we can perform validation on the form controls of a reactive form so in the last lecture we created this form using reactive form approach now currently on none of these form controls any validator has been added so by default all these form controls will be valid and when all the form controls are valid in that case the valid property of the form group will be true so if I scroll down here you will notice that the valid valid property of this form group is true and the invalid property of this form group is false and if we check this valid property on form control level also for that in the form group we have this controls property which is an object and in that controls object for each of these form controls we have a property with a form control name and it is storing an instance of form control so if I expand one of the form controls here for example first name there also you will notice that the valid property on that form control is set to true and the invalid property is false that's because by default each form control in a form is valid and when each form control in a form is valid in that case the complete form will be valid now what we are going to do is we are going to use some validators on some of the form controls for that let's go back to vs code now in case of a template driven form in order to add validation we used to use HTML attributes like for example required so in that case it will make this form control a required field in the same way we also used another attribute called email on the email field in that case in that field we needed to provide a valid email address so we used to do the validation in the HTML itself in case of a template driven form but now in case of a reactive form we don't add these HTML attribute validators on the form element instead we add the validators on the form controls which we are defining inside this form group so for example let's say this first name last name and email it should be a required field to set that valid dator all we have to do is to the Constructor of this form control we can pass another optional argument and here we need to use validators so this validators it is provided by this angular / forms so let's import that and on that validators we have a list of validators for example we have this email validator this Max validator this max length validator Min validator and we also have this required validator and when we use this required validator it makes that form control a required field so if I over over this required validator you will see that it is going to make that field a required field field so user must enter a non-empty value in that field okay let's go ahead and let's use the same valid dator on last name and email as well let's save the changes let's go back to the web page and let me clear the console and now when I click on this submit button this form group has been logged and if you go to the valid property now you will see that it is false and invalid is true because now this first name last name and email these are required Fields but we have not entered any value in these form controls so these form controls are currently invalid because they do not contain a valid value and as we learned if any one form control in a form is invalid in that case the complete form is invalid and that's why here the valid property is false and invalid property is true let's check this valid property on the form control level as well so if I expand this controls object let's expand this first name object object and they also if I go you will see that this valid is false and invalid is true same will be the case with last name so if I expand this last name control there also the valid is false and invalid is true and same thing should be there on the email field as well so this email field is also currently invalid because on this we have added a required attribute so here the valid is false and invalid is true so keep in mind that if any form control in a form is invalid in that case the complete form will be invalid and if we are using a validator on any of the form control then in that case in that form control we must provide a valid data we must enter some valid input in that form control then only this valid property will be true and invalid will be false so now if I go ahead and if I enter some valid value and let's clear the console and now when I click on this submit button now we are providing a valid value for each of the required Fields okay when I click on this submit button if I expand this form group now now you will notice that the valid is true and invalid is false because now each of the form controls contains a valid value and if we check it at the control level also for example for the first name there also you will see that the valid is true and invalid is false because this first name is a required field so its value must be nonempty and currently it is non-m that's why this field has a valid value and when the form control has a valid value its valid property will be true and invalid property will be false and when all the form controls in the form has a valid value the complete form will be also valid all right now here we have entered a proper email address but let's say I enter some invalid email address something like this let me clear the console again and now when I click on this submit button still you will notice that this valid is true and invalid is false and if I expand the controls and there if I expand this email control there also the valid is true and invalid is false now here we are not entering any valid email address but on this email address we have only used the required validator so this form control will only check if in this field we have a non-empty data or not if we have non-empty data in this form control in that case that form will be valid but what we also want to check is if the user has entered a valid email or not for that we can use another validator so let's go back to vs code and on this email field it should be required and user should also provide a valid email address in this field so we also want to use another validator here called email now when we want to use multiple validators on a form control in that case we need to use an array and inside that array we need to specify the validators which we want to use so on the email field we want to use this required validator and we also want to use the email validator for that again first we need to access these validators and on that we will have a valid dator called email with this let's see if the changes let's go back to the web page okay and let's enter some data in these form controls and here in the email let me enter some invalid email address and let's click on the submit button now you will notice that the valid is false and invalid is true because now in the email field we providing some data but that data is not a proper email address so the email validator will check whether this data it is a valid email or not since it is not a valid email the validation will fail and in that case this valid property on the form control as well as on the form level will be false because here one of the form controls has invalid data so the complete form will be invalid and we can also check it on the control level if I expand this email form control there also you will see that the valid property is false and invalid property is true and we can also see what validation error has occurred on this form control for that we can use this errors property so here you can see in the errors property you will notice that we have an error on email so this email is basically a validation error code for each validator we have a validation error code and this email is the validation error code for email validator so if the email validator fails in that case it is going to return an error code email and that will be set here for this errors property okay but if I go ahead and if I enter a valid email address let me clear the console and now when I click on the submit button now you will notice that the valid is true and invalid is false so this is on the form level and on the control level also if I expand this email there also you will notice that now valid is true and invalid it is false and this error object should be null so it means that now on this email form control there is no error if there would have been any error in that case this errors property will have an object and in that object you can see the error code now let's also talk about the state of a form so let me clear the console here let's refresh the page and let's go to this element section and there I'll expand this app Root this sections in there we have this form and in there we have this input box of type text and name here is first name so you can see form control name is first name and we also have this last name input element where the form control name is last name so initially you will see that on these form controls angular is automatically adding a CSS class and in that CSS class you will see CSS classes like NG untouched NG PR and NG invalid that's because initially when the form loads for the first time none of its form controls will be touched okay in that case NG untouched CSS class will be added then none of its form controls is dirty so a form control will be dirty when the form control value changes so since none of the form controls is dirty you will notice that NG pristine CSS class has been added and on this form control we have used a required validator that means in this form control we must enter a non-empty value but currently in this form control we have an empty value so this form control does not contain a valid value for that this NG invalid CSS class has been added by angular so in this way this is the state of this form control now when I click inside this form control inside this first name form control and when I click outside this form control will be touched in that that case this NG untouched will be removed and NG touched CSS class will be added let me show you that so just notice what happens here on this first name input element currently NG untouch CSS class has been added but if I go ahead and if I touch this form control so if I click inside it and then outside you will notice that NG untouched has been removed and NG touched has been added in the same way if I enter some value inside this form control inside this first name form control the value will change in this form control so this NG pristine will be removed and NG dirty will be added for example if I enter John you will notice that NG pristine has been removed and NG dirty has been added and now this form control also contains a valid value it does not contain an empty value so NG invalid has been removed and NG valid has been added and same is the case for all the form controls okay on this last name form control also you will notice that initially NG un touched NG pristine and NG invalid CSS class has been added because this form control is not touched yet its value has not changed and currently it does not contain a valid value it contains an empty string so that empty value is not a valid value for this last name form control because it is a required field that's why you will see NG untouched NG pristine and NG valid but as soon as I click inside this form control and I click outside NG untouched has been removed NG touched has been added if I some value in this field then you will notice that NG dirty has been added and NG pristine has been removed and NG valid has been added and NG invalid has been removed so using these CSS classes we can get the state of the form control now keep in mind that if any one form control in the form is touched that means the complete form is touched if anyone form control is dirty that means the complete form is dirty and if any one form control has an invalid value that means the complete form is invalid okay now we can make use of these states these CSS classes for our own purpose for example let's say if a form control does not contain a valid value and if it is touched in that case we want to show a red border around the form and for that we can make use of the CSS classes so let's say if the form control does not contain a valid value in that case on that form control NG invalid CSS class will be added right so let's go back to vs code and let's go to app component. CSS and there let's scroll down all right and here what we are going to do is we are going to create a CSS class and the CSS class name should be NG invalid okay so if on any form control we have this CSS class NG invalid in that case we want to set its border we want to set its border to Red it should be 2 pixel and solid let's save the changes let's go back to the web page and here you will notice that instead of adding the red border on the form controls it has added the red border on the form now here you might ask why we don't have the red B on the form controls because currently this first name last name and email does not contain a valid value so these are also invalid Fields then we should have a red border around these fields also that's because if I scroll up somewhere we are setting the border for those input elements okay so here you see we setting the border for those input elements so this border is overriding the border which we are trying to set using NG invalid CSS class so I will comment this line here let's save the changes let's go back to the web page and now you will also see the red border around all invalid form controls now we don't want to show the red border around form we only want to show red border around form controls around invalid form controls so let's go back and let's specify that so if the form control is of type input okay and on that if we have this NG invalid CSS class added then only we want to show the red border with this if we save the change if you go back to the web page now you will notice that now that red border is only being shown on the invalid form controls now initially I don't want to show this red border around invalid form controls initially when the page loads this red border should not be there if the user has touched that form control that means if the user has clicked inside the form control but he has not entered a valid value and then he clicks somewhere outside at that time only we want to show the red border around that form control for that if the form control is touched on that NG touched CSS class will be added right so we also going to make use of that CSS class so here let's say if the form control is of type input on that form control if this NG invalid CSS class is added and also the NG touched CSS class is added then only we want to show this red border let's save the changes let's go back to the web page and initially you will not see red B around these form controls but if I click inside this form control this form control will be touched and if I don't enter any value inside this form control in that case it will have an invalid value so in that case NG touch and NG invalid CSS class will be added on that form control now when I click outside now you will notice that now it has a red border around it because this form control is touched and it does not contain a valid value same will be the case with last name and email so this is how we can make use of these CSS classes which gets added on each of the form controls okay we can make use of these CSS classes so you see currently on this first name form control it has NG invalid CSS class added and also NG touched CSS class added and it is of type input and that's why this red border is around this form control but if I enter some valid value here this NG invalid will be removed so let's say John so NG invalid has been removed and since NG invalid has been removed that red border has also been removed okay so here in order to add validators in a reactive form to this form control we need to pass a second argument if we want to use only one validator then we can simply pass the validator name like we are doing here for the first name and last name but if we want to pass multiple validators we need to pass an array and inside that array we can specify the validators which we want to use on that form control now let's see what are the other form controls which is available on this validators object for that let's go to angular.io website there let's go to docs let's go to references and let's go to API references and let's search for validators so here we have the validators and here you can see all the validators which is available on a reactive form if I click on C more you'll also see how to use those validators and what that validator does so for example we also have this Main validator and using this validator we can set in a form control what is the minimum number of values allowed similarly we will have a validator called Max which which tells what is the maximum number of value what is the maximum number of numeric value which is allowed in that form control and in the same way we have other form controls as well for example required and we understood it with an example then we have required true we have this email validator and we have other validators as well like Min length so for example on the first name control if you want to set what is the minimum number of characters required in a name you can use this Min length Val validator okay so you can go through this document to check what are all the validators available for a reactive form in angular now we will learn more about validators in our coming lectures and there we will also see how we can display a custom validation error message in our form whenever form control contains an invalid value in the last lecture we learned how to add validation on a reactive form in angular now in this lecture let's learn how we can show a validation error message to the user if the user has not entered a valid value in a form control So currently if we don't enter a valid value in this first name last name or email field in that case it is showing a red border around those form controls but along with showing red borders around the form control we also want to show what validation error has occurred on that particular form control let's see how we can do that so let's go to vs code and let's go to app component. HTML file there here we are displaying this first name input element after that I'm going to add a small element here and here let's say first name is a required field and let's also use an estri before this okay so this is the validation error message we want to show to the user if the users does not enter a value in the first name input field and for the small element I have also added some CSS so if I go to app component. CSS and if I scroll up here you see for the small element we are setting some CSS styles for example the text color will be displayed in red and the font we will be bold so if I save the changes and if you go to the web page you will notice that this error message is being displayed here now here even if I enter a valid value in this first name field then also this error message will be displayed but we only want to display this error message if the user has not entered a valid value in this field for that what we need to do is if I submit the form here we need to access this first name field this first name control from this controls property and this first name control will have a valid property okay so currently it is true because we have entered some value in this first name field so it contains a valid value that's why this valid is true but if the user has not entered a valid value in this field in that case this valid property will be false and when this valid property of this first name control is false then only we want to show this validation error message now how are we going to do that for that we need to access this valid property of this first name form control and to access the valid property of the first name form control first we will have to access this first name form control and to access this first name form control on this form group we will have a method called get and using that method we can access a form control from a form group let's see how we can do that so let's go back to VSS code and as I mentioned we want to display this error message this small element in the web page only if the for form control has an invalid value so first of all on this one we are going to use NG if directive and using this NG if directive we are going to render this small element in the Dom if the valid property of first name form control is true if it is false then we are not going to render this small element in the Dom for that I'm using this NG if directive now to this NG if directive we need to assign a typescript expression which will return a Boolean value for that we want to access the first name form control from this reactive form form group so this reactive form property we are defining this reactive form property in our app component.ts and it is storing a form group so on that property what we are going to do is so here to this ngf directive let's assign that property and on that property let's call a get method and to this get method we need to pass a string value now what do we need to pass here we need to pass the name of the form control so for this input element for this first name input element the form control name is first name so we need to pass this name as a string value to this get method and it will return us the first name form control from this reactive form form group and in that form control we will have a valid and invalid property so here I'm going to use invalid property so if this invalid property is true so it should be invalid so if this invalid property is true in that case this small element will be rendered in the web page but if this invalid property is false in that case this small element it will not get rendered in the web page okay let's see that in action so let's save the changes let's go to the web page and you will notice that initially that small element is rendered in the web page so we can see the error message here but if I go ahead and if I enter a valid value in this this field let's say John now that error message is gone now what I also want is initially when the page loads that time this error message should not be displayed only if the user has touched this first name form control and if he has not entered a valid value and then he clicks somewhere outside that time only we want to show this error message to the user so we also going to use the touched property of form control so let's go back to V s code and let me move this error message in a separate line so that it will be more readable and here we also going to use end operator okay and again let me copy this expression from here so again on the reactive form we are going to call the get method we are going to get access to this first name control and in that first name control we are going to check if that control is touched or not like this okay so we are checking two conditions now the first condition we are checking is if the first name form control is invalid and if it is touched then only we want to render this small element in the Dom with this let's save the changes let's go back to the web page now initially that error message is not being displayed if I click inside this first name form control and if I don't enter a valid value and if I click outside now that error message is being displayed here but if I go ahead and if I enter EV valid value let's say John that error message is gone and we want to do the same thing for last name and email as well so again let's go back to vs code let me copy this HTML from here and let's also paste it after this last name input element and there we will say last name is a required field and here we want to access the last name form control and for the last name form control the form control name is last name so let's pass this name to this get method so instead of first name we are going to pass last name and here also we going to pass last name okay let's do the same thing for email as well so let's scroll down here we have the email field let's paste the small element there and here we will say entered email is not valid okay and to this get method now we need to pass the form control name and here the form control name is email so let's pass this form control name let's save the changes let's go back to the web page and now if I click inside this first name input element and if I don't enter any value and if I click outside you can see this error message first name is a required field same thing will happen for last name and email ma but if we go ahead and if we enter a valid value in these fields then those error messages will be gone okay now what we also want is if any of the form control does not contain a valid value then we want to disable this submit button this submit button should be enabled that means the user should be able to submit the form only if all the form controls contains a valid value so if I submit this form now you will notice that on the form level also we have this valid property and invalid property so we want to make use of this valid property or invalid property of this form group in order to enable or disable this submit button so if the form is valid that means all the form controls of this form contains a valid value then this submit button will be enabled otherwise if any one form control contains an invalid value this submit button should not be enabled it should be disabled for that let's go to vs code and let's scroll down so here we have our submit button on this submit button I'm going to use this disabled attribute and here I'm going to do property binding now where are we storing our form group we are storing it inside this reactive form property so this reactive form property it is going to store the form group and from that form group we want to access its valid property so here let's say reactive form dot valid so if this expression returns true that means the form is valid that means none of its form control contains an invalid value in that case we want to enable the submit button so here we will use not not operator you can also use invalid property here in that case you will not have to use this not operator but since I'm using this valid property if this valid property returns true we want to enable the submit button but if it return false then only we want to disable the submit button with this let's sa if the changes let's go to the web page and currently if I click on this submit button you will not see that form group logged here because the form is not getting submitted only after I enter a valid value in all the request fields and when I click on this submit button now all the controls here now has a valid value so now this submit button should be enabled and now it should allow us to submit the form and you can see now the form is submitted and the form group object has been logged here but if anyone form control contains an invalid value in that case the complete form will be invalid and in that case this submit button should not be enabled so when I click on this submit button it should not submit the form and we should not see form group object logged here so I have already clicked on the submit button three times but it is not submitting the form and it is not logging that form group object in the console in this lecture let's learn how we can group some of the form controls together in a reactive form so currently all these form controls are part of a single form Group which is representing this complete form so in this form group we have this controls property and in that controls property you can see all the form controls which we have in this form now what we want is we want to group some of the form controls together for example in this form we have some form controls related to address for example the street address country City region and postal code so I want to group these form controls together into a form group and I want to call that form Group address let's see how we can do that so in a reactive form we can group form controls together using three simple steps in the first step let's go to app component.ts there we are creating a form group we are calling it reactive form in that form group we have all these form controls now I want to group some of the form controls together so basically I want to group this Street Country City region and postal code form controls together for that after this gender property I'm going to create a new property I'll call it address and this property is going to be of type form group all these form controls are of type form control but here we are creating a form group so this address property it is going to store a form group and to this address property in order to assign a form group we need to create an instance of form form group class for that we can use this new keyword and after that we can call the Constructor of form group and to this Constructor again we need to pass an object like this and inside this object we can create other form controls so inside this form group we want to have these form controls the street country City region and postal code form control so I'll cut it from here and let's paste it inside this object which we passed ing to this form group Constructor so now these form controls are basically part of this address form group and this address form group it is a part of reactive form form group so this is the first step in the Second Step what we need to do is the form controls which we are defining in the HTML so here we have the address related form groups like State address City we have this country dropdown then we also have this region input element and postal code input element so these form controls should be present inside the address form group so what we need to do is we need to wrap these form controls inside a container div and I'm already doing that so if you see here we have this div and inside this div we have all the address related form controls so I am already grouping them inside a container element but if your form controls which you want to group it is not present inside a single container then first you need to create a container and you need to move all the form controls inside that container which you want to group together okay so that will be the second step and in the third step on this container div you need to use a directive called form group name and to this form group name directive you need to assign the form Group which you have created so here we have created this address form group okay and this address form group is present inside this reactive form form group so here in the HTML we have this reactive form form group you see we have this reactive form form group and in that form group we also have this new form group and and to this form group name we need to assign that form group name which we have created we are calling it address this is the third step so if I save the changes now and if you go to the web page let me clear everything here and let me enter value for the required Fields otherwise the submit button will not be enabled and now when I click on this submit button this form group has been logged here if I expand this form group and if I expand this controls now you will see that we have a new property called address which is a form group and in that form group we have other controls which we can see inside this controls property of that address form group so if I expand this controls property now there we have the City Country postal region and Street form controls so in this way we can group form controls together into a single form group and also if I check the value property of this form Group which is at the top which is representing our form so we have that value property here so if I expand this value property now there you will see we have first name last name username gender and email form controls and they values which we have entered and then we have this address property and in that address property we have other form controls like City Country postal region and street so now in order to read the value of these form controls this street City Country region and postal code form control first we will have to access the value property of this form group in that value property we will have to access the address property and from that address property we can read the value of these form controls okay now let's do one more thing let's go ahead and let's add the required valid dator on this street address this city country and post code for that let's go to vs code and let's go to app component.ts and now to this one we going to make it required field for that we need to use validators and on that validators we have the required valid dator let's do the same thing for Country City and postal code so here also we will use the required validator and on the postal code also we will use the required validator okay so let's say City and region is not required it is optional with this let's save the changes and now what we want is we also want to display an error message if the user does not provide a valid value in the street country and postal code field so let's go to app component. HTML and what I'm going to do is I'm going to copy this small element from here this small HTML and let's add it on Street one address so here we are displaying the street address after that I'm going to add the small element and there let's say street is a required field and we want to show this error message only when the street form control is invalid and if it is touched so to this get method we need to pass the name of the form control now if I simply pass Street here which is the name of the form control like this and here also so if I go back to app component.ts the name of the form control is Street and we are passing it to this get method if I save the changes now and if you go to the web page you will notice that we have an error and it says cannot read properties of null when we are trying to read this invalid property so for some reason this expression here it is returning null now it is returning null because the street property is no more present inside the value property of the top form group so this reactive form it will have a value property and in that value property you see we do not have any Street property right that's Street property is present inside this address property now so in order to access this street property we need to access it on this address property of this reactive form form group so here instead of saying Street we need to say address. street so address is an object which is a property of the value object and in that address we have the street property here also we need to do the same thing address do street now if I save the changes and if you go to the web page now that error is gone and if I click inside the street address and if I do not enter any value you will see this error message street address is a required field let's do the same thing for postal code and Country so I'll copy this HTML from here and let's add it after this drop down and here let's say country is a required field and here we need to pass the form control name so it will be address. country and here also it should be address. country and let's do the same thing for postal code as well so here we are displaying the postal code after that let's add this small element and here let's say address. postal so the name of the form control is postal same thing let's do here let's save the changes let's go to the web page and now if I click inside this postal code and if I don't enter any value you will see that we have this error message street address is a required field but if I enter a valid value inside this then then that error is gone so let's enter some details in these fields and now when I click on this submit button this form group has been logged if I expand this and if I go to the value property of this form group so here we have the value property there you will see all the values have been assigned and for the add address if I expand this address property there City Country postal code region and Street has been assigned okay so this is how we can group some of the form controls together in a reactive form in this lecture you will learn what is a form array and how to create and use a form array in a reactive form a form array is a way to manage a collection of form controls in angular the form control can be a a form group form control or another form array now we have learned that we can also create a collection of form controls by using form group so how is form array different from form group let's try to understand that so in angular we can group form controls in two ways either using form group or by using form array now the difference between form group and form array is in the way they create the collection form group stores the form controls in the form of key value payer in an object on the other hand form array stores the form control as an element of an array so it creates an array and in that array we will have form controls now a form control can be a form group a form control or a form array let's understand form array with an example so here we are creating a reactive form using this form group and in this form group we have form controls and we also have a form group in the same way in a form group we can also have form array so here I'm going to create a form array for that let's create a property let's call it maybe skills and to this we are going to assign an instance of form array now in order to use this form array we also need to import it from angular SL forms now when we create a form group there we pass an object right so here we are passing an object and here also when we are creating this address form group there also we are passing an object but when we create a form array there instead of passing an object we pass an array and inside this array we Define our form controls so for example here I'm going to create a form control for that I can create an instance of form control and initially let's pass the default value as null and it should be form control all right now somehow we need to bind this form control with a form element in the HTML so in the HTML I'm going to create an input element so before this submit button let me go ahead and let me add a div and in that div I'm going to create an input element and this input element it is going to be of type text now on this div I also want to use a CSS class so I want to use this CSS class scroll down and let's add it on that div all right now this div here it is container div so it is containing this input element and inside this div only we want to display all the form controls of the form array So currently in this skills form array we have only one form control now let me go ahead and let me add two more form controls here so I'll copy this line and let me paste it two more times okay so now we have three form controls inside this form array and we want to display all these three form controls inside this div so this div is going to be the container div for all the form controls available inside the form array now what we need to do is on this container div we need to use a directive called form array name and to that we need to assign the name of the form array and what is the form array name it is skills so we are going to assign this value to this form array name directive okay and now inside this form array since we have three form controls we need to create three form controls inside this container div and then we need to connect them in some way so let me first go ahead and let me copy this input element and let me paste it two more times and on these input elements let's also add a placeholder and here let's say add skill let me copy this placeholder from here and let me paste it here and here or instead of doing it like this we know that this form array it is storing an array of form controls right so we can Loop over this array and for each form control we can display this input element so for that what I'm going to do is I'm going to remove these two input elements from here let me move move this attribute in a separate line and after that I'm also going to use NG for directive okay here let's create a variable let's call it control off and then what we want is we want to get access to this array okay now how can we get access to this array well here we have this property called reactive form and on this reactive form we can use a get method to get access to this skills form array for that all we have to do is we have to say reactive form dog and to this get method we need to pass the name of the form array and the name of the form array is skills so here you can see the name of the form aray is skills and from this skills array we want to access all the form controls for that after this we can specify a set of square brackets and inside that we can specify the property name which is controls so this expression here it is going to return us this array okay and on that array we are looping over using this NG for directive and for each iteration that means for each form control inside this controls property this input element will be generated so if you save the changes here and if you go to the web page you will notice that the three inputs element have been generated here which says add skill if I go back and if inside this array if I add one more form control like this then it should display four input elements as you can see now if I go to the elements tab here and let me move this a little bit down and let's expand this Appo let's expand this section in there we have the form let's scroll down and here we have the skills form array if I expand this form array there we have all the input elements now you will notice that none of these input elements has the state for example if I scroll up and if I expand this input box then you will notice that angular has automatically added a state using this CSS class so it has this NG untouched State NG pristine State NG valid state but on these form controls which we have created inside the form array there we do not see that CSS class we do not see the state of these form controls that's because currently these form controls here so the form control which be which will be generated using this input element it is not connected to these form controls in order to connect them on this input element we need to use form control name directive and to this we need to assign a name now these form controls are getting generated dynamically so which name we should be providing here well since we are creating these form controls inside the form array for the form control name we can specify the index of that element in the form array okay so here when we are using this NG for directive after that I will use a semicolon and there I will create a variable I'll call it I equals index and whatever value we will have inside this I variable that we want to use as the form control name so here we are going to assign the value stored in this I variable to this form control name so here I can say I but here this I will be treated as a string value so form control name will be I but instead of specifying the form control name as I we want to assign this form control name with the value stored in this I variable so here we are going to do property binding like this and with this if I save the changes if I go back to the web page let's expand this app rot again this section again and let's scroll down and here we have the skills form array now you will notice that on each of the input elements now the state has also been added so this NG untouched NG pristine and NG valid CSS classes have been added and you can see that there is also an attribute called NG reflect name which is for the first input element is zero for the second input element is 1 for the third input element it is two and for the fourth input element it is three okay so if I go ahead and if I touch this first input element here in the skills array and if I click outside you will notice that from the first input element NG untouched has been removed and NG touched has been added if I enter some value in that you will notice that NG pristine has been removed and NG dirty has been added let's also go ahead and let's add some validation on these form controls so let's go to vs code and we know how to add validation on a form control all we have to do is to this form control we need to pass a validator for that we can use this validators on that we have a property called required so we want to make these input Fields as required Fields let's do the same thing for other form controls let's save the changes let's go back to the web page and now if I click inside this form control inside this ad skills if I don't enter a valid value and if I click outside you will notice that its border has changed to Red so the validation here is also working as you can see and if we look at the state of these form controls you will notice that on these form controls this NG invalid CSS class and NG touched CSS class has been added so the state has also changed so this is how you can create a form array a form array is basically a collection of form control form group or another form array Now to create a form array first we Define it inside the code then we also create a container inside the HTML like we are doing here and inside that we create the form elements and we bind those form elements to a form control in the form array using form control name and we also bind the container element to the form array by using this form array name directive so if I I go back to the web page and if we enter some value in the required fields and now let me go to this console tab let me clear everything here and let's click on this submit button so you'll notice that a form group has been logged here in there we have controls property and in there you will see this address form group and you'll also see this skills form array if I expand this skills form array there also we have this controls property and in there we have four form controls okay and the name of the form control is 01 2 3 so basically here we are using the index of the form control element and also if I go to the value property so we should have a value property somewhere here we have the value property there you will see that for all the the form controls we are reading its value then for the address form controls we have the value inside this address object and then we also have this skills array as you can see and inside this skills array you can see the values like C angular react and SQL so these values are coming from these four form controls and the value entered in these four form controls is stored inside an array okay so this is how we create and use a form array in a reactive form in the next lecture let's learn how we can generate a form control dynamically using form array in the last lecture we learned what is a form array and how to create and use a form array in a reactive form now in this lecture we are going to learn how to add Dynamic controls in a form using reactive form approach and this is what one of the advantages which we get when we use reactive form using reactive forms we can add Dynamic controls in our form let's see how we can do that so in the last lecture we created this skills form array and inside this skills form array currently we have four controls and what we doing is in the HTML file we looping over that form array so here you can see using this NG for directive we looping over that form array and for each iteration we are generating this input element dynamically in the form so if I go to the web page you will notice that in this form we have four input elements where we can add this skill if I go back to vs code and from this form array if I remove let's say two of the form controls in that case in the web page also it will show only two form controls for skill as as you can see now it is showing only two form controls for adding skill so basically we are looping over this form array and for each element of this form array we are rendering this input element dynamically now what we want is initially when this form loads at that time we only want to show one input element for adding the skill for that all we have to do is we have to remove the remaining form controls from this skills form array so now in this skills form array we have only one form control so in the web page also we should see only one skill form control now what I also want is I want to add an add button here and when that add button is clicked it should create this add skill input element dynamically and it should render it here so for that let's go back to vs code and let's first add a button element in the HTML so after this div we going to add a button element and by default as we have learned by default a button is of type submit so whenever that button will be clicked it will submit the form but we don't want that behavior here when this button will be clicked we don't want to submit the form so here we are going to set its type as button okay and on this button let's also add a CS class so in the app component. CSS here I have created a CSS class called button add delete let's go ahead and let's add this CSS class for this button all right so if you save the changes and if you go back to the web page there we have this add skills button and when this button will be clicked we want to add a form control dynamically using which user can add multiple skills for that on this button element we are going to bind click event so let's go back to vs code and here on this button element let's go ahead and let's bind click event and to this click event let's assign a method let's call it maybe add skills you can name it anything and let's go ahead and let's create this method inside the app component class so here after this on form submitted method I'm going to create this add skills method and when this method will be called what we want is we want to insert a new form control inside this skills form array so first of all we need to get access to the skills form array and we can access it using this reactive form property so here we can say this. reactive form and on that we can use this get method and to this get method we need to pass the property name which we want to access here here we want to access this skills property okay so this get method here it will return us this form array Now using this get method it is going to return us a value of type abstract control and form control form group and form array these are the child classes of this abstract control so this get method it can return either form group form array or form control okay and what we want is when this form array will be returned to us on that we want to use push method but here you see this push method is not available push method is only available on form array but since this get method is going to return abstract control a form control a form group and a form array all these three are of type abstract control but only form array has the push method so here we know that this skills it is going to return us a form array so here we are going to explicitly typ cast it to form array and let's wrap this complete statement within parenthesis so this expression here it will return us a form array and on that form array we will have the push method as you can see and using this push method we can push a new form control to this skills array so here let's use this new keyword and then what do we want to push here we want to push an instance of form control and let's pass an initial value here let's say null and the form control which we are pushing here it should be a required field so I'm also going to add this validator on that okay let's move this into a separate length so that it will be more readable all right so now what will happen is the whenever this add skill button will be clicked it is going to call this add skill method and in that method what we are doing we are pushing a new form control to this skills array so if we save the changes now and if you go to the web page and every time I click on this skills button you see it is adding a control dynamically in this form as you can see here every time this add skill button is clicked it is ready rendering a new form control in the form and these form controls here these are being generated dynamically let me actually show you that so let's refresh the page here so initially there will be only one form control for adding skills let's go to elements tab there we have this form let's scroll down and here we have this div for the skills if I expand that currently you will see there is only one input element in that in that div but as soon as I click on this add skills button button you will see one more input element has been added here if I click again again one more input element has been added here so these input elements these form controls these are being generated dynamically and this is how using reactive form we can generate a form control dynamically now let's also go ahead and let's fill this form and let's see if in the value property the values entered in these form controls are displayed or not so first of all we need to fill all the required Fields otherwise the submit button will not be enabled so let's go ahead and let's fill all the required fields and as you can see these skill fields which have been generated dynamically they are also required Fields because we have added this required valid data on those dynamically generated form controls also so those are also required Fields so let's add some skills here okay and let's click on this submit button so let's go to console tab let me clear everything here and let's click on this submit button let's expand this form group and there let's expand this value property so we have all the values captured here and for the skills property you can see we have an array and in that array we have the values which we have entered for skill input elements so we had entered C angular and react and those values have been captured and it is an element of this skills array so from the dynamically generated form controls also we are able to read its value all right now let's also see how we can remove a form control dynamically from a form again let's go back to vs code and in the HTML after this input element let me go ahead and let me add a button element and here let's say delete here let's set it type to button and on this button Also let's add this CSS class and what we will also do is let's wrap it within a div so I'll move this input element and this button element inside this div and on this div let's add a CSS class and let's call it column and what we also want is for each of the input element we also want to have this delete button so we are going to move this ng4 directive on this above div so I'll cut this expression from here and we will add it on this div because for each skill we want to have this input element okay and we also want to have this delete button so that that skill can be deleted all right I hope you got the point so if I go to the web page initially we have one input element for adding the skill and for that we also have this delete button then if I click on this add skill again again we have an input element to add another skill and there for that input element we also have this delete button again if I click on this add skill again we have this add skill form control and for that we have this delete button now what we want is when this delete button button is clicked we want to remove this form control from this form so on that delete button let's again go ahead and let's bind click event so here on this button let's go and let's bind click event and to that let's assign a method on skill delete or maybe let's call it as delete skill and let's go and let's create this method inside the app component.ts yes so after add skill let's also go and let's create this method delete skill now in order to delete a skill first we need to get the index of that skill which we want to delete for example let's say the user has added three skills now he want to delete the second skill basically he want to delete this second form control from the form so we need to get access to this form control using its index now from where we are going to get the index well in the HTML file we are looping over each element of this skills array and for each iteration we are also getting its index and we are storing it inside this variable I so we are going to pass this variable I to this delete skill method okay and here in this method we are going to receive a value let's call it index and it is going to be of type number and using this index we going to delete that skill from this skills form array so first of all we need to get access to this skills form array for that again we can use this expression I'll copy it I'll paste it here and let's go ahead and let's store it in a variable let's call it controls and from within this controls we want to remove an element based on its index so here we can say control do remove at and we want to remove from the given index the index which we are receiving for this delete skill method as its parameter let's save the changes and let's see if it works so let's go back to web page okay let me go ahead and let me add a skill let's say cop let's add one more skill angular and let's add one more skill react now I want to delete this angular skill so I can click on this delete button and that skill has been removed it has been deleted so that form control has been removed from this form let's go to elements tab again let's scroll down to the div where we are displaying the skills here so currently you see we have two elements two Dives in there in the first div we have an input element and a button in the second div also we have an input element and a button now let's say I want to delete this first form control from here so when I click on this delete button this div should be removed let's see if that happens so when I click on the delete button of this first form control for this skills you will see that that div has been removed from the Dom so this is how we can remove a form control dynamically from a given form now just like we can add or remove form controls dynamically from a a form in the same way we can also add or remove form groups from a form dynamically in the last lecture we learned how to add a form control dynamically to a reactive form and we also learned how to remove a form control from a reactive form dynamically now in this lecture we will learn how to add and remove a form group dynamically from a reactive form now we know that a form group is a collection of form controls and in many web applications for example in a job portal website when you create your profile there you can add multiple experiences from your previous companies in the same way in an Ecommerce website like Amazon you can add multiple addresses in your Amazon account and we can achieve something like that for our angular application by rendering a form group dynamically so in a form group we will have multiple form controls and when we render a form group dynamically that means we can render multiple form controls dynamically at a time let's try to understand this with an example so what I want is in this form I also want to allow user to add experience from his previous organizations let's see how we can Implement that so let's go to VSS code and the first thing which we are going to do is in this reactive form inside this form group we are going to create a new form array and I'm going to call it experience and it is going to be of type form array so to this we are going to assign an instance of form array and to this form array we need to pass an array now when we create a form array in the HTML we should have a container element which we can bind to that form array so let's scroll down and here before this submit button let me go ahead and let me add a div okay on this div I'll add a CSS class so I'm adding this input box CSS class and this experience CSS class and I've already created these CSS classes in the app component. CSS file now what we want is we want to bind this container div to this form array to do that let's copy this form array name and on this container div we need to use a directive and the directive name is form array name and to that let's assign this property name which is experience okay so now this div it is binded to this form array now inside this form array I'm going to create an instance of form group so we are creating a form group inside this form array and to the form group to the Constructor of the form group we need to pass an object so now the next thing which we need to do is in the container div which we are binding to this form AR inside that div we need to create another container div and we will bind that container div to this form group so on this div we are going to use another directive called form group name and to this we need to assign a value now what value should we assign to this form group name well when we were looping over this skills array at that time to this input form control we were assigning a form control name and what is the form control name here it is the index of that form control in that form array same thing we are going to do for this form group name so to this form group name we going to assign the index of form group inside this experience form currently inside this experience form array we have created only one form group but we can have multiple form groups inside this experience form array okay so what we are going to do is we are going to Loop over this experience form array and for each iteration we are going to assign its index to this form group name so for each element inside this form array we want to generate this div dynamically and whatever content we have inside this div we want to generate it dynamically so on this div I'm going to use NG for directive and to this let's assign a typescript expression so here let's say let's create a variable let's call it exp off and then now we need to get access to this experience form array and doing that is very simple we are already doing it for skills so here you see on this reactive form we are using this get method to get access to this skills form array in the same way let me copy this line let's paste it here and here instead of skills we are going to pass the name of this form array and then this is going to return us this expression it is going to return us this form array from within that form array we want to get all its form controls and we will have all the form controls inside the controls property of that form array so on that we are going to use this square bracket notation and to that we will pass the property name which is controls and this controls property it is going to store all the controls of that form array as its element so this controls here it is going to be an array and inside that array whatever form group or form control or form array we have inside this experience form array that will be created as an element of this controls array all right so we looping over that array and after this line let's use a semicolon and let's also get the index of each element from that array for that let's create a variable let's call it I and to that let's assign this index variable so this index variable it is going to return us the index of the current form element on which this ng4 is looping over and we assigning that index to this variable I so in this variable I we will have the index of that form group in this experience form array and we want to assign that value to this form group name so here I'm going to assign I now this I it is a variable and we want to assign its value to this form group name so here we are going to do property binding okay all right now what I'm going to do is inside this div we are going to create some form controls and in order to save some time I have already created created it so let me copy this one from here and let me paste it here with this let's save the changes let's go to the web page and if I scroll down here you will see that that HTML is being displayed here okay so this is in the UI now let's go back to VSS code and inside this form group let's create some form controls so we need form controls for company name for position so here the user can select what was his position in his previous organization the total number of years of experience start date when he started in that company and last date so what was the last working day in the previous organization okay so we want to create these five controls in this form group so let's create those controls let's create a property called company and to that let's assign a new form control and initially let's pass the value as null in the same way let's also create form controls for position experience I'll call it as total exp then let's also create a form control for start date I'll simply call it as start and let's create a form control for indate I'll simply call it as end so here we are creating form controls inside this form group and we have also added some form elements inside this container div which we are binding to that form group now all we have to do is now we need to bind these input elements with these properties okay for that on each of these input elements we need to use form control name directive and to that we need to assign the form control property to which we want to bind it to here we want to bind this input element to this company form control so I'll copy this name and let's assign it to this form control name directive let's do the same thing for other form elements so on this select Also let's use the form control name and there we want to bind it to this position form control control then let's do it for experience and there the form control name is total exp let's do it for this start date input element and there the control name is start and let's do the same thing for in dat and there the form control name is end so in this way we binding these form controls to these prop properties of form group okay now let's do one more thing so after this div the container div which we are binding to this form array after that let's go ahead and let's create one more button element let's set its type to button and on this we are going to use this add delete CSS class if I scroll down we have this button add delete CSS class so let's go and let's add this CSS class on this button element and here let's say add experience okay let's save the changes let's go to the web page and here we have this button add experience now what we want is initially these form controls should not be displayed in this form only when the user clicks on this add experience button then only these form control should be rendered in the form so on this button element we are going to bind click event and to that let's assign a method and let's call it add experience and let's go ahead and let's create this method in the app component class so after this delete skill let's go ahead and let's create this method add experience and here what I'm going to do is I'm going to create a variable I'll call it maybe form group and initially we don't want to display this form group okay so I'll cut it from here so I'll cut this expression from here okay so initially this experience form array should be empty we should not see any experience form group in the form and I'm going to assign that form group to this variable to this form group variable if I save the changes if I go back to the web page so you see initially there is no form group displayed only when we click on this add experience button then only that form group with all the form controls should be rendered in this form so when this button will be clicked we are creating a form group now we going to push this form group inside this experience form array for that first we need to get access to this experience form aray so just like how we get access to this skills form aray in the same way we are also going to get access to the experience form so here let's first access the reactive form property on that we are going to use this get method to this get method we will pass the property name and the property name here is experience now this expression this get method it is going to return us an abstract control but we we know that this experience is of type form array so here we will explicitly convert it to form array we will typ cast it to form array so that we can use push method on it and let's wrap this expression within parenthesis so this expression it will return us a form array basically it is going to return us abstract control and we are converting it to form array because this form array it is a child of this AB control class so we can convert it to form array and on that we can use push method now what do we want to push here we want to push this form group so let's go ahead and let's push it here and that's it if I save the changes if you go back to the web page now every time I click on this add experience you will see that form group has been added if I click again another form group has been added if I if I click again another form group has been added so here user can enter multiple experience okay and these form groups are getting generated dynamically now here where we are displaying this experience what I'll do is instead of only showing experience I'll say Experience One experience 2 experience 3 like that so here we have that label after this let's use string interpolation syntax and let's use this index variable okay so here we'll say I + 1 let's save the changes let's go back to the web page and now when I click on this experience here it says experience one again if I click on this add experience here it says experience 2 again if I click here it says experience 3 all right now what we'll also do is we will move this CSS class from here so I'll cut it from here and let let's add it on this div let's save the changes let's go back to the web page so when I click on this add experience here is the first experience here is the second experience here is the third experience so now they are a little bit separated okay so this is how we can generate multiple form controls together with the help of form group and you can also see that these form groups are getting generated dynamically so if I scroll down here we have this div for experience so this div we have binded to the experience form array inside that div you will see that we have three divs and each div here it is binded to form group so for the first div I expand it you see the name is zero right so we are assigning the index number for the form group name so you can see the name here is zero for the second div if I expand this one there you will see that the NG reflect name it is one and for the third div it is two So based on the index number we are assigning a name for that form group and in each of these form groups we will have the company input so here you can see we have the company input then we have this div inside that div we will have this position drop down then we also have this EXP experience input element and we also have start date and end date okay so currently we have three divs because we have added three experiences okay so you see we have three divs currently if I go ahead and if I click on this add experience button again you will see one more div will be added here so if I click on this add experience again you see one more div has been added so these form controls basically each form group here it is getting generated dynamically all right now let's go ahead and let's enter some value in the required fields of this form let's enter a skill I'll only enter one skill and let's enter experiences so let's say first company is ABC let's select a position let's select experience 2 years start date some date and end date let's do the same thing for the second experience let's say company name is XYZ experience 3 years let's select a start date and let's select an end date in the same way let's enter some details for experience 3 let's say company name is ABB software developer experience 5 years let's select some start date and end date finally for this for the experience also let's enter a company name some random company name position experience let's say 6 Years start date and end date now let's go to this console tab let's clear everything here and now let's click on the submit button let's expand this form group there you will see we have controls and there we should see the experience control and it is of type form so all the form controls inside this experience form array will be an element of an array so if I expand this here we have an array as you can see and in that array we have four form groups so you see four form groups and in each form group we will have some form controls so for that we can expand this controls property of that form group so we have this company inate position start date and total experience form control Okay then if if we expand this value property here there all the values which we have entered in these form controls that can be seen and there you will also see this experience control this experience property and if I expand this property there we have an array and in that array we have four elements because we have added four experiences here so we have four elements and whatever value we have entered for each of these experiences that you can check here so for the first experience we added company as ABC we added this end date we added position start date and total experience in the same way for the second experience also we entered these values then for the third experience we entered these values and for the fourth experience we entered these values so you can read those values from this experience property of this value property all right now finally what I also want to do is if the user user wants he can also delete an experience okay so when this delete button will be clicked that particular experience that means that particular form group should be removed from the experience form array and again doing that is very simple all we have to do is on this delete experience button so here we have that delete experience button on this button let's add this click event and here instead of calling it add skill let's call it delete experience okay let's go ahead and let's create this method in the app component class so after the add experience let's go ahead and let's create this delete experience and again we are going to delete an experience we are going to delete a form group from this experience form array based on its index and how are we going to get that index if I go to HTML there you will see that that we looping over this experience form and for each iteration we also calculating its index and we are storing it in this variable I so we are going to pass this variable I to this delete experience method all right and in the app component class here let's specify a parameter let's call it index you can name it anything it is going to be of type number and using that index we want to delete an experience if form group from this experience form array so first we need to get access to this experience form array do that we can use this expression okay and here instead of skills we need to pass the form array name which is experience in this case let's pass it here and it will return us that form array let's go and let's store it in a variable let's call it form array and from that form array we want to remove a form group and experience so for that on this form array let's call this method remove at and to that we are going to pass the index of that form Group which we want to remove and we are going to receive that index inside this index parameter with this let's save the changes let's go to the web page so let's add an experience for that let's click on this add experience button let's create two experience let's say the company name is ABC let's select a position and let's say experience is 2 years in the same way here let's say company name is XYZ let's select a position let's experience is 3 years and here let's also select this start date and end date okay now what I want is I I want to delete this experience so when I click on this delete button you see that experience has been deleted and this experience has now become the first experience if I go ahead and if I add one more experience and without entering anything if I click on this delete button it should be deleted so this is how we can remove a form group dynamically from the reactive form so this is all about creating and using Dynamic form controls if you have any questions then feel free to ask it thank you for listening and have a great day in this lecture you're going to learn how you can create a custom validator to validate the input data in a form control so we have already worked with built-in VAR datas like required email Etc now we are going to create a userdefined validator which we can use on a form control in order to validate the data which the user has inputed in that that form control and in order to create a custom validator first we need to understand what is an error code and how it works so what I'm going to do is currently this submit button will be enabled only after all the required Fields has a valid value but I'm going to remove that logic so let's go to app component. HTML and from this button I'm going to remove this disabled property okay but I'll keep it for your reference here okay let me also go and let me comment it all right so now this submit button will be enabled always okay let me clear the console here and if you remember this first name and last name these two are required Fields also this email is a required field so let's work with this first name form control and let's try to understand what is an error code So currently when I go ahead and click on this submit button this form group has been logged in this form group we have this controls property and there we have this first name control now if I expand this first name control there you will see that we have this errors property and it is assigned with an object where the property name is required and it is set to true so this required here is nothing but it is an error code so on this first name input element we have added a required validator for for that required validator this required is its error code so if we don't enter any value inside this first name in that case the required validator will fail and when the required validator will fail it will return this object and it will be assigned to this errors object all right so for the required validator this required is its error code now if I go ahead and if I enter some value in this field let's say John and now if I submit the form now you will notice that for that first name control this errors is null because now on this first name form control there is no validation error on this first name form control we have only one validator the required validator and since we have provided a value for that field now the required validator has succeeded there is no validation errors so when the validator has passed it is returning null and that is assigned to this errors property next let's look into the email field so if I expand this email field you will see that this email is also a required field and inside this email field we have not entered any value so to this errors property an object has been assigned and there we can see the property name as required so this required error code has been returned by the required validator and it has been assigned to this errors property of email control now if I go ahead and if I enter some value in this field some random value which is not a proper email and now if I submit the form let's go back and let's expand the controls property and there let's expand this email form control now there you will notice that we don't have required error code now we have this email error code because this field is required and on this field we are also using using another validator called email so if I go back to vs code on this email field we are using two validators the required validator and the email validator so we have provided some value inside this email field so it is not an empty value that's why the required validator has passed but this value it is not a proper email address so the email validator has failed and when the email validator has failed it has returned an error code and that error code is email so this email is the error code for email validator so the point which I want to make here is that for a form control if this errors property is null that means on that form control there is no validation error but if this error's property is not null that means on that form control some validation error has occurred and we can see what validation error has occurred by looking into this validation error code so for the email validator the validation error code is email for the required validator the validation error code is required so looking at the validation error code we can know that what validation error has occurred on a form control okay so keep in mind that every validator returns an error code when the validation fails on a form control and we can see that error code using this errors property of the form control so I hope now you know what is an error code now let's see how the buil-in validators of angular are defined so let's go to this angular documentation there let's go to this doc section and here let me search for validators okay here we have the validators and here you can see all the validators now if I click on this CMO button you will see that each validator is basically a method it is a static method so this Min is a validator and it is actually a method in the same way this Max is also a method it is a validator and a validator is basically a method let's scroll down to the required validator so here also you will see that this required it is basically a method now what is the signature of this method so the signature of this method is it is a static method and this required method it is going to take an abstract control and this abstract control is parent class for form control form group and form array so this required validator you can use it on a form control on a form array or on a form group okay and it is going to return either validation errors so basically it is going to return a validation error code or it is going to return null if there is no Val validation error so in the same way we can also create a custom validator if I scroll down to the email validator here also you will see that this email is a method it is a static method and this email is taking one parameter abstract control so basically we can use this email validator on a form group form array or a form control and it is either going to return a validation error code if there is some valid validation error or it will return null if there is no validation error so in the same way we are going to create our custom validator now what custom validator do we want to create so what I want is currently in this first name and last name I can also enter a space right but what I want is in this first name and last name control user should enter only first name and last name without a space so user should not be able to enter John after that a space or something like John Smith so this is also not a valid first name okay or he cannot start with a space like this and then enter the first name this is also not valid so I want to create a validator to check if in first name and last name control if the user has used a space let's see how we can do that so let's go back to vs code and inside this app folder I'm going going to create a new folder I'll call it validators and inside this validators I'm going to create a new file and I'm going to call this no space allowed dot validator dots okay so this is the file name and inside this file we are going to create our valid dat function so let's create a variable let's call it maybe no space allowed so this will be the validator name and to this let's assign a function and this function it is going to receive a form control so we going to use this no space allowed only on form controls we are not going to use it on form array or form group so here I'm going to specify a parameter I'll call it control and it should be of type form control and in in order to use this form control we also need to import it from angular / forms and inside this we are going to write the logic to check if a form control contains a space so here let's write this if statement and first we will check if this controls value property is null or not so here let's check control. value if it is not equal to null then we will check another condition and in this condition we will check if the value of that form control contains a space so we can say control dot value Dot and I'm going to use this method index off and to this we will pass space okay so this index of method will return the index of the first occurrence of this space in a value but if there is no space in that value in that string value in that case this index of will return minus one so here we will check if it is not equal to minus1 that means that value contains a space in that case what do we want to do is we want to return an object and in that object we are going to specify a return code let's call that return code no space allowed okay and let's set it to True otherwise if the value does not contain a space in that case this index of will return minus one so this if statement will fail and nothing will be returned from within this if statement so outside of this if statement we will write the return statement and from here we will return null so if the value does not contain any space that means it is a valid value in that case we are going to return null and whatever value we are returning from here that will be assigned to the errors property of form control so let's save the changes and now we want to use this no space allowed on the first name and last name control so let's first go ahead and let's import it from this file so in the app component.ts at the top we going to write the import statement and we want to import it from validators SL no space allowed validator so from this file now in order to import it we also need to export this method this function so here here let's use the export statement okay let's save the changes let's go back to app component.ts and let's use this no space allowed validator on the first name and last name control now since we want to use multiple validators on this first name and last name we need to wrap it within square brackets like this and after that we can specify multiple validators okay let's do the same thing on the last name let's save the changes and let's see if it works so let's go back to the web page and in there let's say I specify a name John with the space now if I click outside you will notice that here we have an error now the error message says the first name is required field we will change this error message letter but here we have provided a name but then we have a space here so in that case a validation error has occurred on this first name control now what validation error has occurred let's check that let's go and let's submit this form and if I expand this form group there if I expand this controls and if I expand this first name control you can see this errors property it is assigned with this object and there the error code is no space allowed the same error code which we are returning from this no space allowed function okay so this no space allowed validator is working as expected if I remove that space then there is no valid validation error and same thing will happen on the last name as well so in the last name if I say space Smith and if I click outside you will see that we have an error here because space is not allowed in the first name and last name okay but if I remove this space then that validation error is gone so this no space allowed validator it is working as expected now here we have created this no space allowed validator as a function but we can also create it as a method so what I will do is I'll simply create a class I'll call it custom validators okay let's also export this class and let's create this function as a method inside this class so I'll cut it from here I'll paste it here and let's remove this equal to sign okay and let's also remove this statement from here and here we are not using aror function syntax so let's remove that Arrow syntax from there okay so here now we are creating a method now let's make this method static by using the static keyword all right now let's save the changes so now from this file we are no more exporting the no space allowed function but now we exporting custom validators class so let's copy this let's go to app component.ts and there let's import custom validators class and here we can use custom validators class and in that we have a static method no space allowed so this is how we can use that static method in the same way here also we are going to use the custom validator class and in that we have a static method no space allowed let's save the changes let's go back to the web page and let's quickly check if it is still working so if I enter a name inside this first name control and if I enter a space and if I click outside you will notice that we still have the validation error and if I go ahead and if I submit this form and if I expand this form group controls first name control you will see that this errors property it is assigned with an object and in that object the error code is no space allowed okay but if I go ahead and if I remove that space there is no validation error if I submit the form again and if I expand this first name form control now you will notice that this errors it is assigned with value null so in the validator what we are doing is if the value contains a space in that case we returning this object and this object is getting assigned to the errors property of the form control otherwise if the value does not contain a space in that case we are returning null and that is getting assigned to the errors property of form control now what we can also do is we can use the value which gets assigned to this errors property in order to show a custom validation error message based on the error code let's see that so let's go back to vs code and let's go to app component. HTML let's scroll up to the first name input element okay so here we have the first name input element so we want to show this error message first name is a required field only when the error code is required so this expression here it will give us access to first name form control in that form control we have a property called errors and in that errors we will have a property called required if the required validation error has occurred on that form control so here we need to use the square bracket syntax to access the property of this error object and there we going to specify the error code AS required okay so when the error code is required in that case this validation error message will be shown but let me copy this small element and let's paste it again here if the error code is no space allowed okay so this is the error code which we are returning from this no space allowed validator so if it contains the error code as no space allowed in that case we want to show another error message no space is allowed for first name okay let's save the changes let's go back to the web page and here we have an error it says property error does not exist that's because the property name is errors and not error let's save the changes again let's go back to the web page so the error is gone now if I click inside this first name text box if I don't enter any value and if I click outside we see this message first name is a required field but if I enter a value and if I enter a space now you will notice that the error message says no space is allowed for first name okay but if I enter a valid value you will see that here we have an error and the error is because now this errors property will be assigned with the value null right and on that null we are trying to access a required property or on that null we are trying to access no space allowed property so since this errors is null on that null we are trying to access a property that's why we are seeing this error and error says cannot read property of null reading required right so to avoid this error what we can do is here we can use optional chaining so after this errors we can use a question mark and then Dot and this operator is called as optional chaining let's do the same thing here so basically if this expression returns null for example in the first name if we have provided a proper first name without any space in that case this errors will be assigned with the value null so this expression here will return null and when expression returns null or undefined and after that if we have used this optional chaining operator in that case the further expressions are not evaluated so if this expression has returned null after that this expression will not be evaluated if it does not return null or undefined then only the further Expressions will be evaluated okay okay so in this way we can resolve this problem if I save the changes if I go back now and if I click inside this first name if I click outside we have this error message first name is a required field if I enter a valid value let's say John we don't have any error but if I enter a space we have this error no space allowed for first name but if I remove this space we don't have any validation error message and we also don't have any error in the console so this is how we can show a specific validation error message based on what error has occurred on the form control using the errors property of the form control because if there is any validation error on the form control then the errors property will be assigned with an object with the validation error code we can make use of that validation error code to show a specific validation error message but if the errors property is assigned with the value null that means no validation error has occurred on that form control in the last lecture we learned how to create a custom validator in angular now in this lecture you're going to learn what is an snc validator and how to create and use it we use asnc validator when we need to send an HTTP request to the server to check if the data which the user has inputed inside a form control if that data is valid or not so basically when we send an HTTP request to the server the ser might take some time in sending the response and once we have the response then only we can validate whether the data entered in a form control is valid or not for that we use async validator now creating an async validator is very similar to creating a sync validator the only difference is that the async validator must return either a promise or an observable and another point to keep in mind is that angular does not provide any built-in asinc validator in angular all the built-in validators are sync validators for example the required validator the email validator Min and Max validator all these are sync validators angular does not have any built-in async validators but angular do allow us to create our own custom snc validators and use it on a form control or a form group so in this lecture let's see how we can create and use an snc validator in angular so here we have our font form and in this form we also have this username input element now when the user is registering using this registration form at that time user has to provide a username now that username must be unique for each user so if the user is providing a username which already exist for another user then our application should not allow that user to use that username for that what we need to do is as soon as the user has entered a username we need to to check whether with that username a user already exists or not in the database if there is already a user with that username in that case we will show an error message that the username is already taken otherwise with that username if the user does not exist then we will allow the user to use that username now here for this application I'm not using any backend database or any API but we are going to simulate that situation so what we are going to do is we are going to create a function fun and let's create that function inside this file itself inside this nospace allowed. validator dots file there I'm going to create a function and we will assume that this function is an API to which we are making a call from our angle application so here let's create a function and let's call this function username allowed you can name this function anything and this function is going to receive a username name and it is going to be of type string all right now inside this function let's first create a variable let's call it taken usern names and to this let's assign an array so basically this data the taken usern names we will read it from the database but here since we don't have any database for this application we are going to make use of this array and inside this array we are going to specify some use us names which is already taken for example John Smith manoja and sarak King okay so these three are the usernames which is already taken so a user should not be able to register with any of these usernames all right now what we are going to do is from within this function we are going to return a promise for that we are using this promise Constructor and to this Constructor we need to pass a call back function and this call back function is going to receive two arguments resolve and reject now inside this function I'm going to use set timeout function to simulate this situation where the response is going to take some time to reach the client so to the set time out also we need to pass a call back function and we also need to pass a time interval let's say 5,000 milliseconds that means 5 Seconds okay so let's say from our client we are making a request to this API username allowed and this API is going to return us a response after 5 seconds so after 5 Seconds this call back function will be executed and from within this call back function we are going to return some data now inside this call back function what we going to do is we going to check if the username which we are receiving here for this method if it already exists inside this taken username array so here we will say taken usernames dot includes and to this we are going to pass this username so if inside this array we already have an element with the username value in that case this includes method will return true otherwise it will return false so if it returns true that means with this username there is already a user which exists in that case we are going to return a promise and with that promise we are going to return an object and in this object we are going to specify an error code let's say the error code is check username and we are going to set it to true all right but if with this username there is no user inside this taken username array in that case we want to return another data so in that case also we are going to return a promise for that I'm going to call this resolve method and we want to resolve it to null that means there is no user with the given username inside this taken usernames array okay let's save the changes inside this function now we are going to create an async validator and we are going to create that async validator inside this custom validators class so after this no space allowed validator again we are going to create another validator and as we have learned earlier a validator is nothing but a method so here I'm going to create a static method I'm going to call it check username okay now here we need to specify a parameter for this check username so on whichever form control control or form group or form array we will use this check username we are going to receive that form control form array or form group as a parameter for this check username method so here I'm going to call it as control and it should be of type abstract control and in order to use this abstract control we also need to import it from angular SL forms okay so since we are using this abstract control we can use this valid dator on form group form array or form control because form group form array and form control it is a child class of this abstract control class all right now from within this function we are simply going to call this username allowed function so let's call this username allowed function and to this we need to pass a value for this username parameter right so this control if it is of type form control then it will have a value property and that value property will store A Primitive value like string value number Boolean Etc so whatever value is set for the value property of that control we want to assign it to this username so here I'll simply say control. value so for example let's say if we use it on a form control the form control will have a value property and that value property will store the value which we have entered inside that form control and we want to pass that value we want to assign that value to this username parameter now this function here this username allowed function it is going to return us a promise because from here we are returning a promise right and as we have learned earlier an async validator must return a promise or an observable so here this snc validator it is going to return a promise of type any all right and we want to return that promise from within this validator method and that's it in this way we have created an async validator and an asnc validator must return a promise or an observable here what it is going to return if the username which we have passed to this username allowed function if it exist inside this array in that case it is going to return a promise with this data otherwise it is going to return a promise with the value null okay now let's save the changes and let's go ahead and let's use this check username validator on the username form control so let's go to app component.ts here we have the username form control there we passing the first argument as null so we don't want to set any default value and the second argument which we pass to a form control should be a list of sync validators which we want to use on that form control now on this username form control we don't want to use any sync valid dator or if you want we can use the required valid dator on this username so let's go ahead and let's use valid datas do required so this required it is a buil validator and it is a sync validator so the second argument which we pass to the form control it is a sync validator or a list of sync validator like we are passing here to this email form control here we are passing multiple validators so we have wrapped it within an array so here the second parameter is a list of sync validator and for username we are passing only a single validator and that is also a sync validator and the third argument for the form control is a list of async validator now here on this user name we want to use this check username async validator so we need to pass it as the third argument and we need to access it on this custom validators class so here we can say custom validators dot check username okay so keep in mind that the SN validator should be the third parameter the third argument to the form control with this let's save the changes let's go to the web page and let's go to elements tab here and here we have the username input element so let me expand that and currently you will notice that on this username field currently the stateus it is untouched it is pristine and NG invalid has been added because on this username we have used the required validator now let's go ahead and let's enter some username so let's say John Smith now you will notice that on this this NG pending CSS class has been added and after 5 Seconds you can see NG invalid CSS class has been added now this NG invalid CSS class is there because this John Smith this username already exist in this array as you can see so that is not allowed username and that's why here we can see NG invalid CSS class added and you can also see the red border here but if I go ahead and if I enter some other username which is not available inside that array for example maybe XYZ it will take 5 Seconds to validate that and for that 5 Seconds this NG pending CSS class will be added and after 5 seconds once the data is validated so after 5 Seconds this XYZ this value will be checked with this array in this array we don't have any username with the value XY Z so in that case it is returning null and in that case the data is valid so now you will not see any red border here but if I enter a username which already exist for example manoja again you will see this NG pending for 5 seconds and after 5 Seconds when the data will be validated now you will see NG invalid okay so this is how we can create and use an snc validator now if you want you can also use the NG pending CSS class to show a yellow border by the time the data is being verified so let's go to vs code and let's go to app component. CSS let's scroll down and here we are using this input NG invalid and NG touched in the same way let me copy this CSS code let's paste it here and here we want to check NG touch and NG pending so if the form element is of type input and on that form element if this NG pending and NG touched CSS class is added then we want to show a yellow border around that input element or in fact we don't need to check this NG touched let's save the changes let's go back to the web page and here let me type something let's say so by the time you will notice this yellow border is there and after 5 Seconds that yellow border is gone and we don't have any red border because I wanted to check for Manoj Chad this username so for the 5 Seconds you will see yellow border and after 5 Seconds when the data will be validated with this this username we already have a user in that array so you can see the red border is there but if I change the username to something else then again for the 5 Seconds it will validate the data and after 5 seconds once the data is validated with this username we don't have any user so now we don't see any red border so this is all about asnc valid data in angular always remember that an async validator must return a promise or an observ and rest of the implementation is same as the sync validator hello and welcome back in this lecture we are going to talk about two another important properties of a reactive form which is value changes and state changes so value changes and state changes are two events on a reactive form so in this lecture we are going to learn when these events gets fired and how we can listen to these events the value changes is an event which is raised by angular forms whenever the value of the form control form group or form array changes let's try to understand it with an example so in this form we have several form controls now let's take example of this first name form control so in this first name form control when we will start typing something every time the value in this first name form control will change the value changes event will be raised on this first name form control so for example when I type A the value has changed in the first name form control so at this time the value changes event will be raised on this first name form control again if I type something else again the value changes event will be raised on this first name form control and we can listen to this event and we can do something whenever this event happens to listen to this event let's go to vs code and let's go to app component.ts file let me close this no space allowed validator dots file and let me also close this app component. CSS file all right so inside this NG on init method what we are going to do is after we have created this reactive form what we want is we want to listen to Value changes event on this first name form control so first of all we will have to get access to this first name form control to do that here we can simply say this do reactive form and on that we can call the get method and to this get method we can pass the property name as a string value so here we want to listen value changes event on this first name control so we will pass this property name to this get method okay and it is going to return us the first name form control and on this form control we will have a property called value changes now this value changes property it is going to return an observable as you can see and we can subscribe to that observable using this subscribe method and now to this subscribe method we can pass a callback function and this callback function will be called every time the value inside this first name form control will change and we going to receive the new value as an argument to this call back function so here let's call it as value now let's simply go ahead and let's log that value in the developer console okay let's save the changes let's go back to the web page let me clear everything in this console and now as soon as the value inside this first name form control will change for example if I type A inside it you will notice that that value has been logged so basically value changes event was raised and when that event was raised this call back function was called and when this call back function was called we logging the value which we are going to receive for this value parameter and what value we are receiving for this value parameter the value which we have typed inside this first name form control if I type something else again the value changes event will be raised and it will log the value which we have entered inside this first name form control okay so as you can see every time I type something inside this first name form control it is raising the value changes event and whenever the value changes event is raised since we have subscribed to that event that value is getting logged here but if I type something in some other control for example in the last name control at that time you will not see that value changes event being raised because we are not listening to the value changes event on this last name form control we are listening it on the first name form control now just like we can listen to value value changes event on a form control we can also listen to Value changes event on a form group let's see that in action so let's go back to vs code and here instead of listening on the first name form control now we want to listen to Value changes event on this form group so we assigning this form group to this reactive form property so now we want to listen to Value changes event on that form group so for that let's first access that form group and that form group is present inside this reactive form property and on that also we can listen to Value changes event again this value changes event it is going to return an observable and we can subscribe to that observable and whenever the value will change on this form group it is going to call a call back function which we are passing to this subscribe method and there we are going to receive some data okay let's go ahead and let's log that data in the developer console now since we are listening to Value changes event on a form group in that form group in any form control the value will change this call back function will be executed so if I go back to the web page let's clear the console and here you will notice that every time I type something in any one of these form controls so all these form controls belongs to re itive form form group so if in any form control the value will change the value changes event will be raised on that form group on the reactive form form group and since we are listening to that event on the reactive form form group the data will be logged in the console so for example if I type something here you see an object has been logged here and in that object we have the value for each of the controls so in the first name you can see this a is assigned if I enter something inside this last name then also the value changes event will be raised on that form control and in that case an object has been logged here so now you will see that for the first name a is there for the last name s is there if I type something in this street address again that object will be logged so every time the value of any one of these form controls changes it is going to emit the value changes event and you will see that every time we type something in any one of the form control it is logging some object okay so we can listen for the value changes event on a form control or on a form group or on an form array then we have another event called status changes so the status changes is an event which is raised by angular forms whenever angular calculates the validation status of a form control form group or form array now validation States can be valid invalid or pending and we can listen to this status changes event on a form control form group or form array let's understand status changes event with an example so let's say I want to listen for status changes event on this email form control so let's go back to vs code and again I'll comment this line here so in order to listen status changes event on the email form control first we need to get access to this email form control and we already know how to do that so first we will access this reactive form property on that we are going to call the get method to that we need to pass the property name in this case it is email so this expression here it is going to return us email form control on that email form control we will have the status changes proper property and again this status changes property it is also going to return an observable okay and it is going to return us the form control status and we can subscribe to that observable using the Subscribe method now to this subscribe method let's pass a callback function and this call back function will be called every time the status of the form control changes here let's specify a parameter let's call it status and let's say simply go ahead and let's log that status in the console let's save the changes let's go back to the web page let me clear everything and let me start typing something inside this email form control so let's say ABC so you see the status is invalid every time I type something here every time the status is getting calculated okay so the status is invalid if I say at theate gmail.com now it is a valid email so now the status has changed to valid so the status can be either valid invalid or it can also be pending let's use the status changes event on this username form control so that we will also see the pending status so let's go back to vs code and here instead of passing email let's pass username which is the form control name let's save the changes let's go back to the web page let's clear everything here so inside this username as soon as I start typing something let's say Manoj you will see that current status is pending and after 5 Seconds its status will change to valid because with this username we don't have any user in this array in this taken usernames array so that's why it is valid but if I type Manoa in that case for 5 seconds it will be in pending State and after 5 Seconds it will be invalid because with this username we have a username in this taken usern names array so this is how we can listen to status changes event on a form control and we can also listen to status changes event on a form group so let's go back to vs code and now let's listen to status changes event on a form group let me again comment this and we going to listen to status changes event on this reactive form form group so here let's say this dot reactive form dot status changes and the status changes we know it is going to return an observable so let's subscribe to that observable to this subscribe method let's pass a callback function and inside this callback function we are simply going to log the status of the form group okay and let's pass a parameter here let's call it status all right let's save the changes let's go back to the web page let's clear everything now the status of the form group will be valid only if all its form controls has a valid value and its status will be invalid if any one of the form control has an invalid value and the status of the form group will be pending if any form control has a pending status so for example let me go ahead and let me type something inside this first name so still you will see that the status of the form group is invalid because this last name is also a required field email is also a required field and these two form controls has a status of invalid that's why complete form group is invalid let me specify a name in the last name form control still it is invalid let's specify a value in the email it is still invalid and keep in mind that every time the value is changing the Status changes event is being raised that's why you will see that this invalid is locked 23 times now just notice what happens so as soon as I start typing inside this username for example let's say Manoj you will see that the status of the form group is pending and after 5 Seconds it is invalid okay this form control this username form control has a valid value because with this username we don't have any user in the taken username array so this form control value is valid but in this form group we have other required fields for example this street address so let's enter some street address okay still the status is invalid because this city is also a required field let's enter value for that then this postal code is also a required field let's enter some value for that and this skills is also a required field let's enter some value for that and now you will notice that the form group is valid so when all the form controls in this form group has a valid value after that only the form group is valid so using the status changes property we can get the validation state of a form control a form group or a form array so keep in mind that the status changes event it is going to emit a string value that value can be valid invalid or pending and we can make use of these values in order to check if the form is valid or not let's see how we can do that let's go to vs code and there I'm going to create a new property let's call this property maybe form status it is going to be of type string and initially let's assign it with empty string now what we going to do is we are going to set this form status here here so we'll say this dot form status equals the value which we're going to receive for this status parameter so for this status parameter we will receive either valid if the form is valid if all its form control has a valid value or it will be invalid if any form control in this form group has an invalid value or it will be pending if the validation of any form control in this form group has a pending in state okay now let's go to app component. HTML and there I'm going to use NG class directive and to this we are going to assign this form status property so again this form status will have a value either valid invalid or pending and based on that value what we want is we want to set a border color around this form around this this section so now in the app component. CSS so on this form control we also using this container class so let me copy this class name and in the app component. CSS here we will say dot container do valid so if the section has this container CSS class as well as this valid CSS class so this valid CSS class will be added by this NG class directive if the form is valid so this form status will have a value either valid invalid or status so if the form status value is valid in that case on this section we will have this container CSS class as well as valid CSS class in that case we want to show a red border around that section so we are going to set the border and when it is valid we want to show a green border so I'll say green 3 pixel solid in the same way if the value of the form status is invalid in that case invalid CSS class will be added on that section so we will also check for that and in case of invalid we want to show red border around the section and finally we can also have a pending status in that case we want to show Orange B with this let's save the changes let's go to the web page and and let me start typing something so you see there is red border around the form that's because currently the form is invalid now when I start typing username you will notice that the orange border is there around the form and after 5 Seconds it will again change to invalid right because not all the form controls has a valid value so the state of the form group will be invalid and in that case we are displaying the red border all right right now let's enter value in each of the required Fields some dummy value and now the form is valid and when the form is valid you can see a green border around that form so this is one simple use case where you can make use of the validation state of the form group and to get the validation state of the form group you can listen to status changes event on that form group this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day in this lecture we are going to learn about set value and Patch Value method in a reactive form using set value and Patch Value method on a reactive form is very similar to how we use it on a template driven form the set Value method is used to update a form control form group or form array value now when we use set Value method we need to pass an object to the set Value method and the structure of that object must match the value property of the form control form group or form array which we trying to update let's understand this with an example in this form we have this create username button now what we want is when a user clicks on this create username button it should automatically generate a username for that user based on his first name last name and date of birth and then that username should be automatically populated in this username form control so for that we can make use of set Value method now when do we want to update this username form control when this create a username button is clicked so on this create a username button let's first go ahead and let's find click event so let's go to app component. HTML and let's scroll down to that username input and here we have this button and on this button we are going to bind click event and to this click event let's assign a method let's call it maybe generate username and now let's go ahead and let's create this method inside this app component class now in order to save some time I have already created this method this generate username method so I'll copy this logic from here and let's paste it here so basically what we are doing here is inside this generate username button we are getting the value from this first name last name and date of birth form control and we are storing it in these variables F name L name and do then we are checking if the first name length is greater than equal to three then we are going to take the first three characters from the first name but if it is less than three then we are going to take the full value of the first name in the same way if the length of last name is greater than equal to 3 three in that case we are going to take first three characters from the last name otherwise we are going to take the complete last name and we going to append it to this usern name variable in the same way we also reading the value of date of birth and we are converting it to date value and from that date we are getting the full year the birth year from that date of birth and then we are appending it to this username finally here we are converting the username all to lowercase and then we are logging the user the name here so if you save the changes if you go to the web page let's enter a first name let's say John Let's enter a last name let's say Smith and let's select a date of birth and when I click on this create a username button you will notice that a username has been generated based on the first name last name and date of birth okay but if I don't enter any value in this first name field and in this last name field and if I click on this create a username button you will see that the username is 2023 so basically it is only displaying the Year from the date of birth because first name and last name is empty okay if I refresh the page and I simply click on this create a username button so we have not entered any value in the first name last name and date of birth field if I click on this create a username button you see we have an error because in the code we are trying to read the length of first name and last name control but since we have not provided any value here the value in these form controls will be null because that's what we are passing as a default value for these form controls and on that null we are trying to read the length value so what we need to do is if there is no value in the first name last name and date of birth then we will disable this create a username button only when the first name last name and date of birth values are supplied then only this create a user us name button should be enabled let's see how we can do that so let's go back to vs code and let's go to app component. HTML and we want to disable this button if the first name last name and date of birth does not contain a value so here we are going to use the disable attribute and on this we are going to do property binding so what is the condition we are going to check we going to check if the first name form control last name form control and date of birth form control contains a value then only we want to enable this button otherwise this button should be disabled so to get the value of first name form control on this reactive form property we can use get method and to this we need to pass the name of the form control which is first name dot value so if it contains a value in that case this expression will return to true otherwise if it does not contain a value in that case it will be either empty string or it will be null right so in that case this will return false so let me wrap it within parenthesis like this okay so if the first name contains a value in that case this expression will return true in that case we don't want to disable the button in that case we want to enable the button so here I'll use the not operator now not only first name we also want to check for last name and date of birth so here we'll also use or operator actually we need to use end operator because if all the three Fields have some value then only we want to enable the button so for the property name let's pass last name and again let's use end operator and here for the property name let's pass date of birth now we can move these end statements in a separate line in order to make it more readable let's save the changes let's go to the web page and let's see if this button is enabled or not so when I click on this create a username button so button is still not disabled let's see why is that all right we need to move this parenthesis here now let's save the changes let's go to the web page and now when I click on this create a username button we don't see any error but if I enter a first name a last name and a date of birth now this button should be enabled and when I click on this create a username button it is showing that username based on first name last name and date of birth so this requirement is also done now finally instead of logging the generated username in the console we want to populate this username from control with that automatically generated username let's see how we can do that let's go back to vs code again and let's go to app component.ts and in this method inside this generate username method after we have calculated the username instead of logging it in the console what we want to do is we want to populate the username form control for that what we can do is on the reactive form so for that we can access this reactive form property and on that we can call set Value method and to this set Value method we need to pass an object and as we learned earlier this object structure must match the object structure of the form control form group or form array on which we are using it currently we are using it on this reactive form form group so the object which we are passing here its structure must match the structure of that form group so basically it must match this structure so here we have an object so the structure of the object which we are passing to the set Value method it must match the structure of this object that object must have these properties okay so what I'll do is I'll copy all these properties from here and let me go ahead and let me paste it inside this object which we are passing to this set value and instead of assigning it a form control we going to set its value to empty string let's do the same thing for other form controls and here to this address we need to assign an object okay and in that object let's set the value for Street Country City region and postal code and let's remove this closing parenthesis in the same way for this skills let's assign it with an array because this skills is a form array so for the form group for this address property which is a form group we send an object for the skills which is a form array we are going to assign an array and in that array let's say we are going to have only one skill and I'm going to set the value for that skill to empty string in the same way for this experience we are going to assign an array and this array it is going to be an empty array and let's include this closing girly brace and also this parenthesis all right so this is the same structure which we have specified for this reactive form form group now here we want to set the username and we want to set this username with this username value so let's go ahead and let's assign it here with this let's save the changes and let's see if it works or not so let's go back to our web application in the form let's enter first name let's say John last name Smith and let's select a date of birth okay let me clear the console here and when I click on this create a username button you will notice that this username form control has been populated with the generated username okay but other fields have become empty that's because when we are going to click on this create a user name button inside that we are calling this set Value method so this set Value method is going to set the value for each of the form controls as empty string as you can see it will only update the username with the generated username value but all other form controls we are setting it to empty string but we don't want to do that right so here instead of setting it to imp string what we are going to do is we are going to access each of the form controls we going to read it value and we are going to assign it to these properties so for example to this first name we want to assign the value which the user has entered inside the first name form control for that again we need to access the reactive form property on that we are going to use the get method there we are going to specify the property name which is first name so this first name is basically this form control name okay so we are accessing that first name form control using its property name so this is going to return us the first name form control on that we are going to access its value property let's go ahead and let's do the same thing for other properties as well now we are not going to change the username because this username we want to update with this username value so we are not going to read the value of username form control and set that value to this username okay so this is is the one field which you wanted to update but for the other fields the value should be same which the user has entered in those form controls now for the address inside this address we have the street property so here instead of saying Simply Street we don't have any property called Street in this form group so in this reactive form we don't have any property called street instead we have this address property and inside address property we have the street property so in order to access this street property what we need to do is we need to say address. Street okay and then we need to access its value let's do the same thing for Country City region and postal code then for the skills again we are going to read the skills property so here we will say skills and that form control it is going to store an array and we want to assign that array to this skills property and experience also we're going to do the same thing so here we'll pass the property DM as experience with this let's save the changes let's go back to the web page and now if I specify the first name last name and if I select the date of birth and now when I click on this create a username button it is calculated the username but it is not making these fields empty so now we don't have any error any validation error so it is working as expected now let's see one more thing so we have learned that we can use this set Value method on a form group form array or form control so now instead of accessing this set Value method on this form group let's try to Simply access it on the form control on the username form control so let me comment this expression here and let's get access to the username form control for that let's first access this reactive form on that let's use this get method let's pass the control name which is username and on this let's try to use set Value method and as we learned to the set Value method we need to pass the structure of the form group form array or form control on which we are using it so for the username the structure is simple it is just a primitive value so instead of passing an object here we will simply pass the value which we want to update so for example when we used it on the reactive form this reactive form it is a form group and to that form group we pass an object but this username it is simply a form control and the value property of this form control it is not going to contain any object or an array it is simply going to contain a value so that's why instead of passing an object object here we going to pass the value which we want to set for this username form control and that value we have inside the username variable let's see if it works or not let's save the changes let's go back to the web page and let's enter first name last name and let's also enter the date of birth and when I click on this create a username button you see it is still pop ating that username form control so you can also call this set Value method on a form control itself instead of calling it on a form group now you can use this set Value method on a form group when you want to update multiple Fields but if you want to update only a single field then calling the set Value method on the form control itself should be okay all right so this was about set Value method here we learned how to use a set Value method on a form group and also on a form control but we can also use a set Value method on a form array now let's see how we can update a form group using patch Value method so the patch Value method is also used to update a subset of the element of form group or form array and keep in mind that it is only going to update the matching objects and ignore the rest so let's see how we can use patch Value method so again on the reactive form form group we're going to call Patch Value method now if you remember when we were using this patch Value method on a template driven form there on the form object we were also calling form property and on that form property we were accessing this patch Value method but here we can access this patch Value method directly on the form group and to this we need to pass an object and inside this object we need to specify the structure of the property which we want to update we want to update the username property here right so we simply need to pass username and there we need to specify what value do we want to update for that username so here to this username property we want to assign the value stored in the username variable so the value which we have calculated here okay and that should be it if I save the changes if you go back to the web page let's enter first name last name and a date of birth and when I click on this create a username button you see it is calculating the username and it is also not setting other values to empty string so it is working as expected so if you want to update a form group in that case using this patch value is better approach because here you don't need to specify the complete structure of the form group right but when we were using this set Value method on the form group in that case to the that form group we needed to pass the complete structure of that form group even if we were updating only one field so this is the advantage of using patch value over set value now if you want to update let's say in this form group if you want to update let's say this city field then you will have to specify the complete structure of the city field for example this city property is present inside this address property right right so the object which we are passing to this patch Value method let's say we also want to update the city property so the structure of that city property will be first we need to specify the address property because that city property is present inside address property this address property it is an object and in that object we have the city property and to this city property now we can specify a value which we want to update for example let's say we want to update it to Delhi or maybe New Delhi let's save the changes let's go to the web page and let's enter first name and last name let's also select a date of birth all right and now when I click on this create a username button it is going to generate a username and it is going to populate this username form control with that username and it is also going to update this city form control with New Delhi so when I click on this create a username button you see this form control is updated with the value New Delhi and the username is also generated and populated in the username form control so this is how we can use patch Value method so we use set value and Patch Value method to update a form control in a form and set value and Patch Value method can be used on a form control on a form group or a form array here we are using this patch Value method on a form group but we can also use it on a form array and a form control this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day in the final lecture of this section let's learn how we can retrieve form data from the reactive form and also how to reset a form after the form is submitted so in this reactive form if we go ahead and if we enter some data in each of the form controls and now if I go ahead and if I submit this form you'll see that this form group object has been logged here and in this form group object we have this value property and in this value property for each of these form controls a property has been created and to that property the value which we have entered in each of these form controls has been assigned for example in the first name we have entered JN so here also you can see to this first name property JN is assigned in the the same way in the email we have entered this email address so that same email address has been assigned to this email property and if I expand this address property here in there we have other properties like City Country postal region and street so whatever value we have entered in the address form controls like in the street address country City region and postal code those values have been assigned to these properties so if we want to read the value of all the form controls of this reactive form we can make use of this value property of this form group so let's go to vs code and when the form is submitted we want to read the value of each of the form controls so let's go to the submit method so here we have the on form submitted method there we logging the reactive form object this form group but instead of logging this form group what we want is we want to read its value property and we want to log it in the console so here we will simply say this. reactive form do value and it will return us the value object of that reactive form form group if I save the changes now if you go to the web page and again if we enter some details in these fields and when I click on this submit button you will notice that an object has been logged here and in that object we have the address property in that address property we have City Country postal region and Street property we have this date of birth property email experience first name gender last name skills and username property so when we are logging the value object of the form group it is logging this object and we can make use of this object to read the value of each of these form controls using its form control name so now what we want is currently we are entering the details but we are not showing these details which the user has entered in the web page so after this form we want to show the details which the user has entered in this form for that let's go back to vs code let's go to app component. HTML and after this form we are going to write some HTML to display the details which the user has entered in the form and in order to save some time I have already returned that HTML so let me grab it from here and let's paste it here now currently we have these values hardcoded so this email is hardcoded this username is hardcoded this date of birth is hardcoded but what we want is we want to set these values from the form data which the user has entered in the form so in the app component.ts we are going to create a property let's call it maybe form data it is going to be an object of type any and initially let's assign it with an empty object so the object with no property and once the submit button is clicked we want to assign this property this form data property with the value object of the form group so here we will say this do form data equals this. reactive form. value and it is going to return us the value object and we assigning this value object to this form data now we can make use of this form data property in the HTML so here we want to show the user full name so here we want to show the user first name and last name so here we will use string interpolation syntax and there we will say form data and in this form data we will have a first name property in the same way in this form data we'll also have a last name property so let's add a space and after that on this form data let's also access the last name property then here we want to display the email so in the form form data we also going to have the email property then here we want to display the username so in the form data object we will have a property username then here we want to display the date of birth so from the form data we going to access its do property and it will return us the date of birth which the user has selected in the form then here we want to show the country so we will access the Country property on that form data here here we want to show city so we will access the city property on that form data and remember that this form data it is going to return us the value object and this country property it is present in the address property of that value object right so here we cannot access this country property directly so if I go to app component.ts there the structure of the value object will be similar to this object which we are passing to this form group and in in that structure we don't have a country property we have this address property and in that address property we have this country City region and postal code property and the street property so we cannot access this country property directly we need to access it on the address property so here we will say form data do address do country and here also we will say form data do address. City then here we want to show the region so again that region is present inside this address property in the address property we have a property called region and in the same way here we want to show the postal code so again in the address property we have the postal property with this let's save the changes let's go to the web page and currently you will see there is no data displayed here but let's go ahead and let's enter some data and here it says cannot read property of undefined that's because initially when this page loads this form data here it is in empty object it does not have an address property right but here in the HTML we are trying to access this country property on that address property but initially when the page loads there is no address property in this form data so this expression here it is going to return undefined and on that undefined we are trying to access the Country property so initially when the page loads what we will do is here we will use the optional chaining operator so if this expression returns undefined then we will not try to access the Country property only if this address property returns something then only we will try to access this country property okay so here let's use that optional chaining operator let's save the changes let's go back to the web page and now there is no error we don't see any data here now let's go ahead and let's enter some dat data in these fields and let's clear the console here and let's scroll down and let's click on this submit button and now you will notice that that data is being displayed here now in this Avatar image also we want to show the first letter from the first name and the first letter from the last name so let's also do that and doing that is very simple so here we are displaying the avatar name so here first we want to get the first letter from the first name for that we can say form data do first name and on that I'm going to use the slice method and to the slice method we need to pass two arguments so the first argument will be the starting index from where we want to extract the characters so we want to extract the characters from index zero because we want to extract the first character from the first name and we want to extract only one character so the second argument will be one so this will return us the first character from the first name in the same way we also want to extract the first character from the last name so here on the form data we will access the last name and on that we are using the slice method to extract its first character all right so this is how you can extract the first character from the first name and last name and those two characters will be displayed in this Avatar So currently you see since we have not entered any data nothing is being displayed here and again we have this setup because initially when the page loads this form data will be an empty object there will not be any first name property there so again here also let's use optional chaining operator let's save the changes again let's go back to the web page let's fill the required fields and now let's go ahead and let's submit this form so let me first clear the console let's submit the form and now you will see all data which we have we have entered in this form and you'll also see the first character from the first name and the first character from the last name so this is how we can read form data from a reactive form we can read form data using the value property of that form group object like we are doing here now what we also want is when the form is submitted after that we want to reset this form so we want to make all these form controls go to its previous state and all these form controls should be empty doing that is again very simple we need to use the reset method on the form group so again here we can say this do reactive form and on that we can call the reset method and it will simply reset the form and when I say it will reset the form it will make all the form controls empty and it is also going to set the state of each form controls to the the initial state so again let's go ahead and let's enter some details in this form controls let me clear the console let's scroll down and now you will notice that as soon as I submit the form the state of each of these form controls will change so for example let's see the current state of this first name form control so here we have our form in this form here we have this columns and in this columns we have this first name form control So currently on this first name form control this NG dirty NG valid and NG touched CSS class has been added so this is the current state of this first name form control now as soon as I submit this form the details have been displayed here and you will notice that all these form controls have become empty and you will also see that on the first name form control so here we have that input element this first name in put element there you will notice that the state has also changed so now it has the state NG untouched NG pristine and NG invalid so this is the initial state of this form control when this form gets rendered for the first time and same will be true for all other form controls so this reset method this not only sets each form control to empty but it also reset the state of each form control and hence the form group now you'll also notice that when we have reset the form there is no default gender selected and there is no default country selected but what we want is even if the form is reset it should have a default value of gender as male and the default value for country as India so to this reset method we can again pass an object and that object structure must match the object structure which we have passed passing to this form group okay so this structure and then we can set default value for some of the properties for example let me copy each property from here and let's pass it to the reset method here and there for all the properties we want to set its value to null so let me quickly do that okay to this reset method we are passing an object and the structure of that object must match the structure of the object which we are passing to the reactive form group and there when the form is getting reset we are setting the initial value of each of the form controls to null like we were doing when we were creating this form so that time also for each of these form controls we have set its initial value to null so the same thing we are doing here as well but here we also want to set a default value for gender and the default value for gender we want to set to mail in the same way we also want to set a default VAR for country as India let's save the changes let's go back to the web page okay now let me go ahead and let me again enter some data in this form and let me go ahead let me submit this form so as soon as I submit the form you can see the details which we have entered in the form and the form is also reset and when the form is reset now you can see there's a default value for gender which is male and a default value for Country which is India rest other form controls are empty now so using this reset method you can also set a default value for some of the fields like we are doing here for gender and Country all right so this is all about reactive forms in angular in this section we learned about reactive forms in great detail we learned how to create a reactive form how to validate a reactive form how to retrieve value from a reactive form and many more things and I have covered most of the topics in this section with a real world example so that you can understand how we can use each feature of a reactive form in a real world project if you have any questions related to reactive form then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 14,031

Keywords: reactive form, dynamic form control, angular, angular tutorial, complete angular course

Id: KG0LSaVWolU

Length: 210min 5sec (12605 seconds)

Published: Fri Oct 06 2023