AngularJS form validations with submit and reset buttons

Question

I have a simple form where I have applied AngularJS validation on a input box containing number value. On submit, it works fine but when I click on Reset button, it gives the input box validation error message. Looks like it is calling ng-submit after ng-click of Reset button. I have tried resetting the value of input field in ng-click, removed type='Reset' and also used $setPristine() on the form. But nothing helps. Below is the code.

<form name="myForm" novalidate ng-submit="submitFilter()">
    Enter Age:
    <div>
        <input name="age" ng-class="{errorinput: submitted && myForm.age.$invalid }" class="form-control" ng-pattern="/^[0-9]+$/" placeholder="Age" type="text" ng-model="age" required>            
    </div>
    <span class="error" ng-style="{color:'red'}" ng-show="submitted && myForm.age.$invalid">Please enter a valid Age</span>
    <button type="submit">
        Submit
    </button>
    <button ng-click="reset(myForm)">
        Reset
    </button>        
</form>

Controller:

var original = $scope.age;
$scope.submitFilter = function () {
    if ($scope.filterForm.$valid) {     
    } else {
        $scope.submitted = true;
    }
};                
$scope.reset = function (myForm) {
    $scope.age = angular.copy(original);
    $scope.myForm.$setPristine();
};

Kindly help in getting rid of this error. Thanks in Advance.

Try adding the attribute type="button" to the reset button. By default a button in a form is a submit button. — Rob
– Rob, Commented Dec 22, 2014 at 14:24
Added but still getting validation error on clicking Reset button. Thanks. — pogo22
– pogo22, Commented Dec 22, 2014 at 16:46

Rebornix · Accepted Answer · 2014-12-23 02:27:50Z

2

Setting the reset button's type as 'button' should work. Following code works perfectly on my machine.

// Code goes here

app.controller('mainController', function($scope) {

 $scope.age = 123;
 var original = $scope.age;
 $scope.submitFilter = function () {
   $scope.submitted = true;
 };                
 $scope.reset = function (myForm) {
   $scope.age = angular.copy(original);
   $scope.myForm.$setPristine();
 };
});


  <form name="myForm" novalidate ng-submit="submitFilter()">
    Enter Age:
    <div>
        <input name="age" ng-class="{errorinput: submitted && myForm.age.$invalid }" class="form-control" ng-pattern="/^[0-9]+$/" placeholder="Age" type="text" ng-model="age" required>            
    </div>
    <span class="error" ng-style="{color:'red'}" ng-show="submitted && myForm.age.$invalid">Please enter a valid Age</span>
    <button type="submit">
        Submit
    </button>
    <button type="button" ng-click="reset(myForm)">
       Reset
    </button>        
  </form>

answered Dec 23, 2014 at 2:27

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

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

3 Comments

pogo22 Over a year ago

You are using which version of AngularJS and Jquery.

Rebornix Over a year ago

@pogo22 Angularjs 1.3.8 and jquery 2.1.3, both are the latest version.

pogo22 Over a year ago

Added the code on Plunker with the latest versions available there. plnkr.co/edit/MpsrsTiUWAsgqquGZZP9?p=info Also added $scope.submitted = false; in reset function of Controller. Thanks

Collectives™ on Stack Overflow

AngularJS form validations with submit and reset buttons

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related