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

Question

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

当click事件触发时,表单的pristine值会按照我的预期更改,但是当我直接操作scope变量时,即使表单上的控件绑定到该变量,表单的pristine设置也不会更改.

请看以下JSfiddle:

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

我希望当控件绑定到范围变量时,更改布尔值会导致窗体pristine设置发生更改.有没有更好的方法来测试这个？当表单上没有任何变化时,是否有更好的方法来调整按钮或其他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

在$pristine与一个输入的属性格式ng-model指令只改变其ngModelControllers时$setViewValue()使用的方法,即通过用户交互对所述输入元件或通过调用自己,方法.

这是因为原始状态用于跟踪您更改的形式(修改了任何ng-model已启用的输入元素).这并不意味着输入中的值等于模型中的值,它们总是在每次击键后更新!没有自动方式将表单重置为pristine,您必须通过调用自行决定何时执行此操作form.$setPristine().

如果要在示例中重置原始信息,则必须通过将按钮绑定到范围上的函数来告诉表单重置自身:

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

如果要为表单和对象的原始状态设置单独的值集,则必须克隆该对象,然后在表单中使用克隆.否则,所有更改始终会立即更改原始对象.

然后,您可以通过在原始对象与其克隆之间执行深度比较来确定表单的状态.

更新 2015年5月:这个答案是从2013年开始的.在最近的Angular版本(目前为1.4)中,ngModelController获得了一个更加丰富的API,它提供了一些管理表单状态的机制.