带有提交和重置按钮的AngularJS表单验证

我有一个简单的表单，其中我在包含数值的输入框上应用了AngularJS验证。在提交时，它可以正常工作，但当我单击重置按钮时，它会显示输入框验证错误消息。似乎在ng单击重置按钮后调用ng submit。我尝试在ng click中重置输入字段的值，删除了type='Reset'，并在表单上使用了$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 ng-click="reset(myForm)">
        Reset
    </button>        
</form>

请帮忙消除这个错误。

---

提前感谢。

将重置按钮的类型设置为“按钮”应该可以工作。下面的代码在我的机器上运行良好

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

//代码在这里
应用控制器（'mainController'，功能（$scope）{
$scope.age=123；
var original=$scope.age；
$scope.submitFilter=函数（）{
$scope.submitted=true；
};                
$scope.reset=函数（myForm）{
$scope.age=angular.copy（原件）；
$scope.myForm.$setPristine（）；
};
});
输入年龄：
请输入有效年龄
提交
重置

尝试将属性type=“button”添加到重置按钮。默认情况下，表单中的按钮是“提交”按钮。已添加，但单击“重置”按钮时仍会出现验证错误。谢谢。您使用的是哪个版本的AngularJS和Jquery。@pogo22 AngularJS 1.3.8和Jquery 2.1.3都是最新版本。在Plunker上添加了代码，其中包含最新版本。还添加了$scope.submitted=false；在控制器的复位功能中。谢谢

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