javascript Angular.js $watch 上的表单/表单输入有效性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21164611/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js $watch on form/form inputs validity
提问by fxck
Is there any particular reason why this deep watch doesn't fire?
这个深表不开火有什么特别的原因吗？
http://plnkr.co/edit/6FxMS4RlfljBMkprZYQs?p=preview
http://plnkr.co/edit/6FxMS4RlfljBMkprZYQs?p=preview
Could it be that watch doesn't check angular attributes? Ie. those begging with $? If that's the case, is there any way to watch on validity change, and not just on the form, but on any of the inputs?
难道手表不检查角度属性？IE。那些用美元乞讨的人？如果是这种情况，有什么方法可以观察有效性的变化，而不仅仅是在表单上，而是在任何输入上？
回答by fxck
The solution is to watch on .$error, which works just fine. See http://plnkr.co/edit/6FxMS4RlfljBMkprZYQs?p=preview
解决方案是观察 .$error，它工作得很好。见http://plnkr.co/edit/6FxMS4RlfljBMkprZYQs?p=preview
It's basically like watching on form's valid, except that this one updates everytime any validity inside changes.
这基本上就像观察表单的有效性，除了每次内部有效性发生变化时都会更新。
Credit goes to https://stackoverflow.com/users/490498/jonathan-rowny
回答by T-student
Maybe a bit later but i have found another way. Using:
也许稍后，但我找到了另一种方法。使用：
$scope.$watchCollection
in particular you can watch the myForm variabile inside the scope using $watchColletion and update your buttons or anything you need.
特别是您可以使用 $watchColletion 观察范围内的 myForm 变量并更新您的按钮或任何您需要的东西。
$scope.$watchCollection(function () {
if ($scope.myForm)
return $scope.myForm;
}, function () {
if ($scope.myForm)
if (($scope.myForm.$invalid == true))
$scope.formValidityChange(true);
else
$scope.formValidityChange(false);
}, true);
this will check all the variabiles that change inside the form and you will update the controller. i think u can also check what is changed by comparing the two objects maybe this can be more difficult.
这将检查表单内更改的所有变量，您将更新控制器。我想你也可以通过比较两个对象来检查发生了什么变化，也许这会更困难。
回答by ilmatic
$watch watches changes on the $scope. Since your input is not bound to the same $scope property that is being watched, your watch listener is only called once, on initialization.
$watch 观察 $scope 上的变化。由于您的输入未绑定到正在监视的同一个 $scope 属性，因此您的监视侦听器仅在初始化时调用一次。
To give a little better idea of how $watches, binding and $scope works, here is what your scope looks like (actually, your scope is empty, because you haven't written anything into it, but this is what it WOULD look like based on your template):
为了更好地了解 $watches、binding 和 $scope 的工作原理，这里是您的作用域的样子（实际上，您的作用域是空的，因为您没有向其中写入任何内容，但这就是它的样子基于您的模板）：
{
shizzle: { // <--- This is the property you're watching
$valid: false,
whatev: {
valid: false
}
},
whatev: "" // <--- This is the object that is changing when you type into the <input>
}
As you can see, shizzle is being watched, but doesn't change, so the watch listener is only fired once.
如您所见，shizzle 正在被监视，但不会改变，因此监视侦听器仅被触发一次。
Here is an edited version of your plunker that binds the watcher to the input's model, and logs all changes, for demonstration:
这是 plunker 的编辑版本，它将观察者绑定到输入的模型，并记录所有更改，以供演示：
http://plnkr.co/edit/NrE5blIbyBcsOjC2vIrk?p=preview
http://plnkr.co/edit/NrE5blIbyBcsOjC2vIrk?p=preview
EDIT: If your goal is to watch the $valid attribute, which angular is setting, then you can change this line:
编辑：如果您的目标是查看 $valid 属性，即角度设置，那么您可以更改此行：
scope.$watch(attrs.name, function(newVal, oldVal) {
console.log(newVal);
}, true);
to this:
对此：
scope.$watch("shizzle.$valid", function(newVal, oldVal) {
console.log(newVal);
}, true);
