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

I would like to adjust display of form items such as a button's enabled/disabled attribute by testing the Angular JS pristine setting.

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

When a click event fires the form's pristine value is changed as I would expect but when I manipulate the scope variable directly the form's pristine setting is not changed even though a control on the form is bound to that variable.

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

Please see the following JSfiddle:

请看以下JSfiddle：

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

I would expect that the altering of the boolean value would cause the forms pristine setting to change when a control is bound to a scope variable. Is there a better way to test this? Is there a better way to adjust buttons or other DOM elements when nothing has changed on the form? Thanks in advance for any pointers. Here is the code in case the JSfiddle isn't working.

我希望更改布尔值会导致窗体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>

1 个解决方案

#1

The $pristine propery of a an input with an ng-model directive only changes when its ngModelControllers $setViewValue() method is used, that is through user interaction on the input element or by calling that method yourself.

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

This is because the pristine state is used to keep track of wether you changed (modified any ng-model-enabled input elements in) the form. It does not mean that the values in the inputs are equal to the values in the model, they always are updated after every keystroke! There's no automatic way to reset a form to pristine, you have to decide yourself when to do that by calling form.$setPristine().

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

If you want to reset the pristine information in your example, you have to tell the form to reset itself by binding the button to a function on the scope:

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

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

If you want to have a separate set of values for the form and for an object's original state, you have to clone the object and then use the clone in the form. Otherwise all changes always immediately alter the original object.

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

You can then determine the state of the form by performing a deep comparison between the original object and it's clone.

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

UPDATE May '15: This answer is from 2013. ngModelController has gained a significantly richer API in recent versions of Angular (currently 1.4), that offers some mechanisms for managing form state.

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

#1