Angular $setPristine() not working

2024/2/27 7:27:23

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.

Answer

$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 = {};
};
http://en.ppmy.cn/q/41304.html

Related Q&A

Laravel and google maps : foreach latitude/longitude show marker or map

I have a table locations with a latitude and longitude field.For each location I want a new map (or better a new marker) that uses the latitude and longitude from the table locations to display a city …

Dynamics 356 v9 - use executionContext.getFormContext() with HTML web resource

Any ideas how we can we use executionContext.getFormContext() with an HTML web resource? only method that seems to work is parent.Xrm.Page which is now deprecated.

Using this instead of scope with AngularJS controllers and directives

I was recently reading John Papas opinionated AngularJS style guide and noticed his convention on controllers:/* recommended */ function Customer () {var vm = this;vm.name = {};vm.sendMessage = functio…

Whats the difference between using this and the object name for reference inside the object?

If I have the following code:var obj = {x: 34,init: function() {alert(this.x);alert(obj.x)}};Both alerts displays 34. But what is the difference, and is one better than the other?http://jsfiddle.net/4…

How to modify / add to Cookie in JMeter?

Im very new to JMeter and need your help on how to modify a cookie.Here is the scenario: Im testing an assessment/test taking website that offers multiple answers to questions. When a user makes his se…

Run Javascript in Chrome Extension - Basic?

I get the feeling Im missing something very obvious, but Ive been looking everywhere and cant seem to make this work. In short, I want to turn a small Javascript script into a chrome extension to make …

Log js file name and function name

I would like my node.js project to generate log files that are a bit similar to log4j format in that I would like each log line to commence with the file name and the js function name that the log requ…

How to get domain from a string using javascript regular expression

As the title suggests, Im trying to retrieve the domain from a string using javascript regular expression.Take the following strings: String ==> Return "goo…

JavaScript time greeting?

How do you make something with JavaScript that when your time is below 12 oclock, it says "good morning!" and when it is after 12 oclock, it says "good afternoon!"?

Convert absolute position to relative

Is it possible to change DIV position from absolute to relative (and from relative to absolute)? DIV should remain on same place.