angularjs - 观察表单模型的变化

Question

假设给定的形式如<form name="myForm"> ，使用简单的 watch 很容易观察有效性、错误、脏状态等:

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

但是，似乎没有一种简单的方法可以观察此表单中的任何给定输入是否已更改。像这样深度观察，不行:

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

$watchCollection只深入一层，这意味着我必须为每个输入创建一个新的 watch 。不理想。

有什么优雅的方式可以观察表单上任何输入的变化，而无需求助于多个观察，或放置 ng-change每个输入？

Answer 1

关于possible duplicate以及您的评论:

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).

如果您添加 true 作为 $watch 的第三个参数，它就会起作用:

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

更多信息请参阅docs .

Working Fiddle (检查控制台日志)

<小时/>

另一种更具 Angular 的方式是使用 Angular 的$pristine。一旦您操作表单模型，此 bool 属性将被设置为 false:

Fiddle