Mark form as unsubmitted in AngularJS

Question

In AngularJS, is there a way to mark a form that has already been submitted as not running (therefore, it loses the ng-submitted class?

Background:

In my css, I use angular validation classes to do the following:

• Initially, all inputs have a normal border color.
• If the user changes the input for an invalid value, set the border color to red.
• If the user clicks the submit button, set the border color of all invalid inputs to red.

I execute it like this:

 input.ng-dirty.ng-invalid, .ng-submitted .ng-invalid { border-color: #F00; } 

It works great. Now I have a form that sends an asynchronous request, and if the server responds with a success status, I want to clear the form (and effectively reset to its original state). The problem is that when I clear the form, it still has the .ng-submitted class, so all required fields have a red border. However, I want them all to have a normal border.

I should be able to mark all fields as untouched using $setPristine() , but I see no way to mark the form as unsubmitted. Is this possible, or do I need to create and save my own class for this?

Answer 1

You can reset your form and thus mark it unsubmitted using the following snippet.

Html:

 <input type="button" ng-click="reset(form)" value="Reset" /> 

Angular Script:

 $scope.reset = function(form) { if (form) { form.$setPristine(); form.$setUntouched(); } $scope.user = angular.copy($scope.master); }; 

This was taken from https://docs.angularjs.org/guide/forms