为什么Angular JS form.$pristine不会随着直接JS操作而改变

Question

我想通过测试 Angular JS 的原始设置来调整表单项的显示，例如按钮的启用/禁用属性。

当点击事件触发时，表单的原始值会按我的预期更改，但是当我直接操作范围变量时，即使表单上的控件绑定到该变量，表单的原始设置也不会更改。

请看下面的JSfiddle：

http://jsfiddle.net/nicholasporter/2h7wT/3/

我希望更改布尔值会导致表单原始设置在控件绑定到范围变量时发生更改。有没有更好的方法来测试这个？当表单上没有任何变化时，是否有更好的方法来调整按钮或其他 DOM 元素？在此先感谢您的任何指点。这是 JSfiddle 不工作时的代码。

 <div ng-app ng-controller="MyCtrl">
    <form novalidate name="myForm">
    {{myBool}}

      <input type="checkbox" ng-model="myBool" />
      <button ng-click="myBool=!myBool">JS set</button>
        <div>Form Pristine:{{myForm.$pristine}}</div>
    </form>
  </div>


<script>
    function MyCtrl($scope){
        $scope.myBool = false;
    }
</script>

Answer 1

带有ng-model 指令的输入的$pristine 属性仅在使用其ngModelControllers $setViewValue() 方法时发生变化，即通过用户交互在输入元素或通过调用自己处理。

这是因为原始状态用于跟踪您是否更改（修改了任何ng-model 启用的输入元素）表单。这并不意味着输入中的值等于模型中的值，它们总是在每次击键后更新！ 没有自动方法可以将表单重置为原始状态，您必须自己决定何时调用form.$setPristine()。

如果你想在你的例子中重置原始信息，你必须通过将按钮绑定到范围上的函数来告诉表单重置自己：

$scope.toggleBool = function() {
  $scope.myBool = !$scope.myBool;
  $scope.myForm.$setPristine();
}

如果您想为表单和对象的原始状态分别设置一组值，则必须克隆该对象，然后在表单中使用该克隆。否则，所有更改总是会立即更改原始对象。

然后您可以通过在原始对象和它的克隆之间进行深度比较来确定表单的状态。

2015 年 5 月更新：这个答案来自 2013 年。ngModelController 在 Angular 的最新版本（当前为 1.4）中获得了 significantly richer API，它提供了一些管理表单状态的机制。