Question

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

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

Answer 1

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

请参阅http://plnkr.co/edit/815Bml?p=preview

Answer 2

对于那些想要获得$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类）仍然需要考虑，但这解决了我的问题：隐藏错误消息。

Answer 3

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

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

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

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

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

Answer 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();
};

Answer 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;
            }
        });
    }
};

Answer 6

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

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

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

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

AngularJs。$ setPristine重置表单

6 个答案: