AngularJs .$setPristine 重置表单答案

【问题标题】：AngularJs .$setPristine to reset formAngularJs .$setPristine 重置表单
【发布时间】：2013-05-26 12:27:35
【问题描述】：

提交表单后，我一直在努力重置表单。有人发布了这个Here，我想让它工作但没有成功。这是我的My Code Example。

$scope.form.$setPristine(); 未将 Pristine: {{user_form.$pristine}} 设置为 true。见上面的例子。

【问题讨论】：

查看您的代码，我认为部分问题是 data.name 正在以常规角度方式清除。如果您在模型中声明数据并在 reset 方法中实际使用 $scope.data.name = '' 会怎样。否则，您可以尝试 $scope.apply();我认为模型仍然很脏，这就是它不起作用的原因。

标签： angularjs

【解决方案1】：

$setPristine() 是在 angularjs 的 1.1.x 分支中引入的。您需要使用该版本而不是 1.0.7 才能使其工作。

见http://plnkr.co/edit/815Bml?p=preview

【讨论】：

你是对的。一个问题。何时将其添加到稳定版本。任何想法或将在 1.0.x 分支中使用？ 1.1.5 不稳定。
我不确定他们什么时候能让 1.1.x 稳定下来。
@Rashid Angular 1.2 将是下一个稳定版本（无论何时发布）。所有 1.1.x 版本都受 API 更改的影响，但无论如何从 1.0.x 迁移到 1.2.x 时，您都必须处理这些相同的更改。

【解决方案2】：

有一个类似的问题，我必须将表单设置回原始状态，但也要设置为未触及，因为 $invalid 和 $error 都用于显示错误消息。仅使用 setPristine() 不足以清除错误消息。

我通过使用 setPristine() 和 setUntouched() 解决了这个问题。（参见 Angular 的文档：https://docs.angularjs.org/api/ng/type/ngModel.NgModelController）

所以，在我的控制器中，我使用了：

$scope.form.setPristine(); 
$scope.form.setUntouched();

这两个函数将完整的表单重置为 $pristine 并返回到 $untouched，以便清除所有错误消息。

【讨论】：

感谢您的信息。就我而言，它是 form.$setPristine() 和 form.$setUntouched()。
他们应该提供一个函数来进行完全重置

【解决方案3】：

只针对那些想要获得$setPristine而无需升级到v1.1.x的人，这里是我用来模拟$setPristine函数的函数。我不愿意使用 v1.1.5，因为我使用的 AngularUI 组件之一不兼容。

var setPristine = function(form) {
    if (form.$setPristine) {//only supported from v1.1.x
        form.$setPristine();
    } else {
        /*
         *Underscore looping form properties, you can use for loop too like:
         *for(var i in form){ 
         *  var input = form[i]; ...
         */
        _.each(form, function (input) {
            if (input.$dirty) {
                input.$dirty = false;
            }
        });
    }
};

请注意，它只会使$dirty 字段干净并有助于更改“显示错误”条件，例如$scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid。

表单对象的其他部分（如 css 类）仍然需要考虑，但这解决了我的问题：隐藏错误消息。

【讨论】：

【解决方案4】：

还有另一种原始表单的方法，就是将表单发送到控制器。例如：-

鉴于：-

<form name="myForm" ng-submit="addUser(myForm)" novalidate>
    <input type="text" ng-mode="user.name"/>
     <span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
      <span ng-show="myForm.name.$error.required">Name is required.</span>
    </span>

    <button ng-disabled="myForm.$invalid">Add User</button>
</form>

在控制器中：-

$scope.addUser = function(myForm) {
       myForm.$setPristine();
};

【讨论】：

【解决方案5】：

DavidLn's answer 过去对我来说效果很好。但它并没有捕捉到 setPristine 的所有功能，这一次让我大吃一惊。这是一个更完整的垫片：

var form_set_pristine = function(form){
    // 2013-12-20 DF TODO: remove this function on Angular 1.1.x+ upgrade
    // function is included natively

    if(form.$setPristine){
        form.$setPristine();
    } else {
        form.$pristine = true;
        form.$dirty = false;
        angular.forEach(form, function (input, key) {
            if (input.$pristine)
                input.$pristine = true;
            if (input.$dirty) {
                input.$dirty = false;
            }
        });
    }
};

【讨论】：

【解决方案6】：

我解决了在 Angular 1.0.7 版中必须将表单重置为原始状态的相同问题（没有 $setPristine 方法）

在我的用例中，表单在填写并提交后必须消失，直到再次需要填写另一条记录。所以我通过使用 ng-switch 而不是 ng-show 来制作显示/隐藏效果。正如我所怀疑的，使用 ng-switch，表单 DOM 子树被完全删除，然后重新创建。所以会自动恢复原始状态。

我喜欢它，因为它简单干净，但可能不适合任何人的用例。

这也可能意味着大型表单的一些性能问题（？）在我的情况下，我还没有遇到这个问题。

【讨论】：