观察表格模型的变化答案

【问题标题】：Watch form model for changes观察表格模型的变化
【发布时间】：2015-07-16 20:08:19
【问题描述】：

假设一个给定的形式，例如<form name="myForm">，使用一个简单的手表就很容易观察有效性、错误、脏状态等：

$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 只深一层，这意味着我必须为每个输入创建一个新手表。不理想。

什么是一种优雅的方式来观察表单的任何输入变化，而不必求助于多个观察，或者在每个输入上放置ng-change？

【问题讨论】：

AngularJS 1.3 - `ng-change`-like functionality for the entire form的可能重复
该问题中的指令解决方案有效，但这不是我的想法（即不优雅，因为它需要模糊才能工作）。理想情况下，我希望它以类似的方式工作，即在子输入适当更改后，Angular 在内部立即将表单设置为 $valid 或 $error。

标签： angularjs forms angularjs-watch

【解决方案1】：

关于possible duplicate 和您的评论：

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

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

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

更多信息见docs。

Working Fiddle（检查控制台日志）

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

Fiddle

【讨论】：

确实，我知道假设您的表单字段都共享一个共同的父对象，它会以这种方式工作。而且我可以以这种方式使用手表 - 我理想情况下希望有一种方法可以使用表单名称而不是每个输入绑定到的模型来观看
这取决于您是否需要新值。如果您现在只想知道某些事情发生了变化，您应该使用$pristine。
它是在自动保存的上下文中，所以虽然$pristine 或$dirty 对第一次更改很有用，但除非我手动设置原始/每次保存的肮脏价值对我来说似乎有点骇人听闻。我可能不得不对输入共享的模型进行深入观察。

【解决方案2】：

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

【讨论】：