Question

在我的应用程序中$watch如果表单在执行某些操作之前有效。问题是ngForm在使用之前不会编译models。

例如：http://plnkr.co/edit/Y7dL67Fn7SaSEkjiFf2q?p=preview

JS

  $scope.results = [];
  $scope.$watch(function() {
    return $scope.testForm.$valid;
  },
    function( valid ) {
      $scope.results.push( valid );
    }
  )

HTML

<ng-form name="testForm" ng-init="test = 1">
  <input ng-model="test" required>
</ng-form>

<p ng-repeat="result in results track by $index" ng-class="{'false': !result, 'true': result}">{{ result }}</p>

结果：

false // Wrong
true

首先，表单不应无效，因为$scope.test设置为1。

有任何线索吗？

Answer 1

根据 the docs ：

在使用范围注册观察程序后，将异步调用侦听器fn（通过$evalAsync）以初始化观察程序。在极少数情况下，这是不合需要的，因为在watchExpression的结果没有改变时调用了监听器。要在侦听器fn中检测此方案，您可以比较newVal和oldVal。如果这两个值相同（===）则由于初始化而调用了监听器。

它（几乎总是）使用支票忽略第一个电话是有意义的：

$scope.$watch('testForm.$valid', function (newValue, oldValue) {
    if (newValue === oldValue) { return; }
    $scope.results.push(newValue);
});

另请参阅此 short demo 。

Answer 2

不确定是否正确理解，但可能是第一次AngularJS检查，

$scope.results = [];

为空，因此在推送任何内容之前，结果会被评估为false。

如果您以非空结果开头，请说：

$scope.results = [1];

首先评估是真实的。

我不认为$ watch是正确的方法。我认为你的问题与$ watch的运作方式以及Angular的摘要周期有关。

模型更新前ngForm无效

2 个答案: