问题 观察表单模型的变化


假设给定的形式如 <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 在每个输入?


3354
2018-05-06 15:19


起源

可能重复 AngularJS 1.3 - 整个表单的类似于ng-change`的功能 - DTing
该问题中的指令解决方案有效,但它不是我想到的(即不优雅,因为它需要模糊才能工作)。理想情况下,我希望这可以以类似的方式工作,即在子输入适当更改后,angular内部将表单设置为$ valid或$ error。 - Duncan


答案:


关于 可能重复 和你的评论:

该问题中的指令解决方案有效,但它不是我想到的(即不优雅,因为它需要模糊才能工作)。

它可以添加 true 作为你的第三个参数 $watch

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

更多信息见 文档

工作小提琴 (查看控制台日志)


另一个 更有棱角的方式 将是使用角度的 $pristine。此布尔属性将设置为 false 一旦你操作表单模型:

小提琴


7
2018-05-06 16:15



事实上,我知道它的工作原理是假设您的表单字段都共享一个共同的父对象。我可以这样使用手表 - 我理想地希望有一种方法可以使用表单名称,而不是每个输入绑定到的模型 - Duncan
这取决于您是否需要新值。如果你现在只想改变某些东西,你就可以使用了 $pristine。 - DonJuwe
它是在自动保存的背景下,所以同时 $pristine 要么 $dirty 对于第一次更改是有用的,它们对于每次后续更改都没有用,除非我在每次保存时手动设置pristine / dirty值,这对我来说似乎有些笨拙。我可能不得不深入了解输入共享的模型。 - Duncan


根据我对表单的体验(新开发,但现在与Angular合作一段时间),观看表单进行更改的优雅方式实际上根本不使用任何类型的watch语句。
使用内置的Angular boolean $ pristine或$ dirty,这些值将在任何输入字段或复选框上自动更改。
问题是:如果你从一个让我困扰了一段时间的数组中添加或拼接,它将不会更改该值。
对我来说最好的解决方法是手动执行 $scope.MyForm.$setDirty(); 每当我从我的不同阵列添加或删除。 像魅力一样工作!


3
2017-07-29 18:30