Question

假设某个表格如<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的情况下观看任何输入更改表单的优雅方式是什么？

Answer 1

关于possible duplicate和您的评论：

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

如果您将true添加为$watch的第三个参数：

，则此功能正常

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

更多信息请参阅docs。

Working Fiddle（查看控制台日志）

另一个更多角度方式将使用angular $pristine。操作表单模型后，此布尔属性将设置为false：

Fiddle

Answer 2

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

观察表单模型的变化

2 个答案: