Watch form model for changes

Question

Assuming a given form such as <form name="myForm">, it's easy enough to watch for validity, error, dirty state, etc. using a simple watch:

$scope.$watch('myForm.$valid', function() {
  console.log('form is valid? ', $scope.myForm.$valid); 
});

However, there doesn't appear to be an easy way to watch if any given input in this form has changed. Deep watching like so, does not work:

$scope.$watch('myForm', function() {
  console.log('an input has changed'); //this will never fire
}, true);

$watchCollection only goes one level deep, which means I would have to create a new watch for every input. Not ideal.

What is an elegant way to watch a form for changes on any input without having to resort to multiple watches, or placing ng-change on each input?

Answer 1

Concerning the possible duplicate and your comment:

The directive solution in that question works, but it's not what I had in mind (i.e. not elegant, since it requires blur in order to work).

It works if you add true as third parameter for your $watch:

$scope.$watch('myFormdata', function() {
    console.log('form model has been changed');
}, true);

Further information see the docs.

Working Fiddle (check console log)

---

Another more angular way would be to use angular's $pristine. This boolean property will be set to false once you manipulate the form model:

Fiddle