11

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?

4

2 回答 2

7

关于可能的重复和您的评论：

该问题中的指令解决方案有效，但这不是我的想法（即不优雅，因为它需要模糊才能工作）。

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

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

更多信息请参阅文档。

工作小提琴（检查控制台日志）

另一种更角度的方式是使用 angular's $pristine。false一旦您操作表单模型，此布尔属性将设置为：

小提琴

于 2015-05-06T16:15:57.140 回答
4

根据我对表单的经验（新开发者，但现在使用 Angular 有一段时间了），观察表单变化的优雅方式实际上是根本不使用任何类型的 watch 语句。
使用内置的 Angular 布尔值 $pristine 或 $dirty ，这些值将在任何输入字段或复选框上自动更改。
问题是：如果你从一个让我难过一阵子的数组中添加或拼接，它不会改变值。
对我来说最好的解决方法是$scope.MyForm.$setDirty();在我从不同的数组中添加或删除时手动执行。像魅力一样工作！

于 2015-07-29T18:30:35.033 回答