AngularJs empty form and remove invalid state from inputs
angularjs, javascript
Solution
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);
};
}
Problem
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.