CODEWITHSUNDEEP
angularjs
pogo22
pogo22

Reputation: 147

AngularJS form validations with submit and reset buttons

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.

Upvotes: 1

Views: 2684

Answers (1)

Rebornix
Rebornix

Reputation: 5270

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>

Upvotes: 2

Related Questions