为什么无效表单在结果无效后首先有效？

Question

为了简化事情,我编写了一个示例表单来描述我的问题:

<form novalidate name="form">
  <input required name="foo" ng-model="my.foo">
</form>

还有一个控制器:

angular.module('sample', []).controller('MainController', function($scope) {
  $scope.$watch('form.$valid', function (valid) {
    console.log(valid);
  });
});

预期结果:

> false

实际结果:

> true
> false

任何人都可以告诉我为什么一开始表格有效然后变得无效(顺便说一下,它应该是什么样的)？

工作演示

Answer 1

我确实这是由于指令的优先权.

在angularJS <form>中实际上是一个指令.required是另一个.

让我们有一个没有验证的表格.表格始终有效.我很确定现在我们可以说默认情况下表单是有效的.

"form"指令的优先级高于"required".这意味着在某一点上.Angular应用"form"指令,而不是"required"指令.这导致有效形式的输入具有未知属性"required".下一个摘要将分析"必需"指令.它发现输入为空并且设置为false.

正如Omri所说,它是指令优先级和消化周期的重要组成部分.