AngularJs。$ setPristine重设表格


76

提交表单后,我一直在努力重置表单。有人在这里发布了此文件,我想使其正常运行,但没有成功。这是我的代码示例

$scope.form.$setPristine();没有设置Pristine: {{user_form.$pristine}}true。请参阅上面的示例。


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

Answers:


90

$ 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时都必须处理这些相同的更改。
Nate Bundy 2013年

15

有一个类似的问题,我不得不将表单设置回原始状态,但又保持原状,因为$ invalid和$ error都用于显示错误消息。仅使用setPristine()不足以清除错误消息。

我通过使用setPristine()和setUntouched()解决了它。(请参阅Angular的文档:https : //docs.angularjs.org/api/ng/type/ngModel.NgModelController

因此,在我的控制器中,我使用了:

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

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


6
谢谢(你的)信息。在我的情况下是form。$ setPristine()和form。$ setUntouched()。
哈维尔·巴斯克斯

他们应该提供一个功能来进行完全重置
Jacob Stamm,

12

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


7

还有另一种原始形式的方法,就是将表单发送到控制器中。例如:-

鉴于:-

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

6

过去,DavidLn的回答对我来说效果很好。但是它没有捕获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;
            }
        });
    }
};

4

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

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

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

这也可能暗示大型表单存在一些性能问题(?)在我的情况下,我还没有遇到这个问题。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.