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.

Answer 1

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