angularjs – 为什么Angular JS形成。$pristine不会随着直接JS操

发布时间：2020-12-17 08:03:15 所属栏目：安全来源：网络整理

导读：我想通过测试Angular JS pristine设置来调整表单项的显示，例如按钮的启用/禁用属性。当click事件触发时，表单的pristine值会按照我的预期更改，但是当我直接操作scope变量时，即使表单上的控件绑定到该变量，表单的pristine设置也不会更改。请看以下JSfid

我想通过测试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>

具有ng-model指令的输入的$ pristine属性仅在使用其ngModelControllers $ setViewValue()方法时更改，即通过输入元素上的用户交互或通过自己调用该方法。

这是因为原始状态用于跟踪您更改的内容(修改了任何ng-model-enabled输入元素)。这并不意味着输入中的值等于模型中的值，它们总是在每次击键后更新！
没有自动方式将表单重置为pristine，您必须通过调用表单来决定何时这样做。$ setPristine()。

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!