Angular $setPristine() not working

Question

I'm trying to use Angular's built-in form functions, specifically setPristine() to clear the form on user submit. My controller has access to $scope.newForm (my form) with all of its methods, but running $scope.newForm.$setPristine() isn't resetting the form fields.

Here is my HTML:

<div ng-controller="NewFormController">
    <h3>New Entry</h3>

    <form name="newForm" method="post" novalidate>
        <div class="input-group">
            <label>Name</label>
            <input name="name" type="text" ng-model="place.name"/>
        </div>
        <div class="input-group">
            <label>Description</label>
           <textarea name="description" type="text" ng-model="place.description"></textarea>
        </div>
        <div class="input-group">
           <label>Neighborhood</label>
           <input name="neighborhood" type="text" ng-model="place.neighborhood"/>
        </div>
        <div class="input-group">    
            <label>Address</label> 
           <input name="location" type="text" ng-model="place.address"/>
        </div>
        <input type="submit" value="Submit" ng-click="submit(place)"/>
    </form>
</div>

And here is the controller where I call setPristine():

app.controller('NewFormController', function($scope, $compile) {

    $scope.place = { 
        name: 'ExamplePlace', 
        description: 'This is a description!', 
        neighborhood: 'Manhattan', 
        address: '112 Street Place' 
    };

    $scope.submit = function(place) {
        $scope.newForm.$setPristine();
        $scope.newForm.$setUntouched();
    };

});

Here is a working codepen that reproduces my problem.

Note: I'm using Angular version 1.4.3.

You mean, isn't resetting.... yeah, $setPristine was not meant to do that - it just marks the form as $pristine. To reset, you need to clear/reset your view model, in your case: $scope.place = {} — New Dev
– New Dev, Commented Aug 15, 2015 at 22:14
Yes, "isn't". Thanks, I thought that setPristine() cleared the inputs as well. — Himmel
– Himmel, Commented Aug 15, 2015 at 22:17
well, no - it doesn't. It wouldn't even know how, because there are a number of way to "clear" - could be "", or undefined or something completely different for custom controls. So, to "clear", you modify the view model to whatever "clear" means, typically resetting to a new object works - which is how it is supposed to be — New Dev
– New Dev, Commented Aug 15, 2015 at 22:18
Gotcha - $setPristine() is helpful for form validation, but doesn't affect the view model variables declared in the input elements. — Himmel
– Himmel, Commented Aug 15, 2015 at 22:19

New Dev · Accepted Answer · 2015-08-16 02:34:48Z

11

$setPristine only marks the form as being $pristine, which is useful for validation-driven expressions and CSS (e.g. .ng-dirty)

So, $setPristine does not clear the form's controls. In fact, it wouldn't even know how to do that. Consider, that to "clear" could mean different things to different models. "Clear" could mean "", or undefined, or null, or anything at all that a custom input control that works with ngModel could mean.

So, to properly clear the form is to modify the View Model that drives the form to whatever definition of "clear" it needs. In most cases - yours included - it is just a matter of setting the View Model to a new object:

$scope.submit = function(place) {
   $scope.newForm.$setPristine();
   $scope.newForm.$setUntouched();

   // clear the form
   $scope.place = {};
};

edited Aug 16, 2015 at 2:34

answered Aug 15, 2015 at 22:29

New Dev

49.8k12 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oliver Over a year ago

I dont understand the meaning of $scope.place. Could you tell me what that does and explain what it is exactly.

New Dev Over a year ago

@Oliver, $scope.place is the model defined in the OP's question - it has not special meaning in Angular. The expression $scope.place = {} sets the model to a new object.

Collectives™ on Stack Overflow

Angular $setPristine() not working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related