AngularJs empty form and remove invalid state from inputs

Question

I'm using a form to add elements to list that is displayed on the side of the form. Markup is:

  <form name="thingForm">
      <input required type="text" ng-model="thing.name"/>
      <input required type="text" ng-model="thing.value"/>
      <input type="submit" ng-click="addThing(thing)"/>
    </form>
    <ul>
      <li ng-repeat="thing in things">{{thing.name}} with value of {{thing.value}}</li>
    </ul>

And in a controller I have:

$scope.things = [];
$scope.addThing = function(thing) {
    $scope.things.push(thing);
    $scope.thing = {};
};

Working jsfiddle: http://jsfiddle.net/cXU2H/1/

Now as you can see, I can empty the form by emptying the model, however since the inputs have the required tag the browser still displays an error message (at least Chrome does).

I looked at the similar questions and:

I've also looked at this answer: https://stackoverflow.com/a/16296941/545925 however the jsfiddle behaves exactly the same as in my example: after the input is cleared it still has an ng-invalid-required class remaining (and it also triggers a HTML5 error message)
~~since I'm not on the 1.1.x branch $setPristine() is not available for me~~ $setPristine() behaves the same way

I can of course write a function that iterates through the elements of a form and removes every ng-invalid-required and ng-invalid class, but that is not the way I would like to solve this. That is what I would do with jQuery.

$setPristine() is the correct approach here. If you don't want to switch to 1.1.x just monkey-patch your version with this commit: github.com/angular/angular.js/commit/… — pkozlowski.opensource
– pkozlowski.opensource, Commented Jul 23, 2013 at 15:45
There is substantial number of changes in 1.1.x and there are breaking changes. Refer to the changelog: github.com/angular/angular.js/blob/master/CHANGELOG.md — pkozlowski.opensource
– pkozlowski.opensource, Commented Jul 23, 2013 at 15:56
Okay, I tried the 1.1.5 version and $setPristine() behaves the same way. It empties the form but required inputs still trigger the HTML5 error. — adamors
– adamors, Commented Jul 23, 2013 at 16:01

Ygor Cardoso · Accepted Answer · 2013-07-23 16:20:35Z

9

Are you using $setPristine right? You can easily see in your fiddle that if you add it, it works. http://jsfiddle.net/X6brs/

var myApp = angular.module('myApp', []);

function MyCtrl($scope) {
    $scope.things = [];
    $scope.addThing = function(thing) {
        $scope.things.push(thing);
        $scope.thing = {};
        $scope.thingForm.$setPristine(true);
    };
}

answered Jul 23, 2013 at 16:20

Ygor Cardoso

2613 silver badges13 bronze badges

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

4 Comments

adamors Over a year ago

It doesn't. In Chrome I get an HTML5 error saying "Please fill out this field" immediately after the input is cleared.

Ygor Cardoso Over a year ago

That's a different problem, after submission it is focusing the first invalid fields; either you change the input type to button instead of submit or do event.preventDefault() and handle the submission your way.

adamors Over a year ago

You are right. I added a preventDefault on the button and it worked. Thanks.

deitch Over a year ago

Does this work for you? I am using Angular 1.2.13, and using form.$setPristine(true), and I still have ng-invalid classes set on my field. I stepped through the angular source code, and it appears to do nothing to remove invalid classes.

user1672155 · Accepted Answer · 2015-10-01 19:59:09Z

1

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

will do the trick.

answered Oct 1, 2015 at 19:59

user1672155

1 Comment

Pedro A Over a year ago

This did it for me, thank you very much! $setPristine() alone wasn't working.

Collectives™ on Stack Overflow

AngularJs empty form and remove invalid state from inputs

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related