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

Question

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

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

请参阅以下 JSfiddle:

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

我希望 bool 值的更改会导致表单原始设置在控件绑定(bind)到范围变量时发生更改。有没有更好的方法来测试这个？当表单上没有任何变化时，是否有更好的方法来调整按钮或其他 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 中启用的输入元素)表单。这并不意味着输入中的值等于模型中的值，它们总是在每次击键后更新!
没有自动方法可以将表单重置为原始状态，您必须通过调用 form.$setPristine() 自行决定何时执行此操作.

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

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

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

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

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