So, I have an HTML form and whenever there is a change in it I want to perform an action, there are two ways to do the monitoring in Angular-

a) Using ng-change in the input fields and calling the function to perform if form changes.

This way is pretty easy and that’s okay when there are like 5 input fields in a form, all we need to do is to put ng-change in each field. But what if there are 100 input fields in a form, it is takes heck lot of time to put ng-change for each of the 100 input fields. So, it is good only for less number of fields not for more.

b) Using $watch in the controller, to check for the form changes using $pristine in the form. 

The $watch way is my favorite, all you need to do is to use a simple $watch in the controller in order to detect the changes in it. Here is the way to do it,

Lets take the same above example and take off the ng-change from it, your controller should look like something below –

But this wouldn’t work, why everything seems to be right?   The above code has a mistake, what is it? So for example, I came from a place where there is a local famous guy called – “Sid Smith” and I went to my friends place to attend a party, there I have been taking Sid Smith’s name constantly and my friends were able to relate to this guy called Sid but not the strangers. So there should always need to be local reference in order to able to make a conversation.

Here we had similar situation, we need make a local reference in controller in order to understand which form is it, all we need to do for that is create an empty object in controller.

and the HTML should look like below –

That’s all, here the watch is checking form constantly if the form is $pristine or no and calls the function whenever there is a change in the form.