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: /

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: 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.

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/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./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.

• javascript
• angularjs

• $setPristine() is the correct approach here. If you don't want to switch to 1.1.x just monkey-patch your version with this mit: github./angular/angular.js/mit/… – pkozlowski.opensource Commented Jul 23, 2013 at 15:45
• Does the 1.1.x branch break anything in the 1.0.x version? – adamors Commented Jul 23, 2013 at 15:47
• There is substantial number of changes in 1.1.x and there are breaking changes. Refer to the changelog: github./angular/angular.js/blob/master/CHANGELOG.md – 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 Commented Jul 23, 2013 at 16:01

2 Answers 2

Are you using $setPristine right? You can easily see in your fiddle that if you add it, it works. http://jsfiddle/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);
    };
}

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

will do the trick.