#133 valueChanges & statusChanges Events | Reactive Forms | A Complete Angular Course

[Music] 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 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 even was raised and when that event was raised this callback function was called and when this callback function was called we are 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 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 reactive 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 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 we 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 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 callback 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 simply go 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 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 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 to listen to status changes event on this reactive form form group so here let's say this do 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 state us 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 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 usernames 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 so we'll say this dot form status equals the value which we are 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 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 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 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 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

Channel: procademy

Views: 2,367

Keywords: valueChanges, statusChanges, reactive form, angular forms, angular, angular tutorial, complete angular course

Id: zjfn07Lb4A8

Length: 18min 12sec (1092 seconds)

Published: Wed Jan 10 2024