23

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

1 回答 1

28

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

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

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

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

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

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

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

于 2013-02-15T14:15:06.997 回答