AngularJS使用提交和重置按鈕形式驗證

Question

我有一個簡單的表單，我已經在包含數值的輸入框中應用了AngularJS驗證。提交時，它工作正常，但當我點擊重置按鈕，它會給出輸入框驗證錯誤消息。看起來像是在點擊重置按鈕後調用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> 

控制器：

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(); 
}; 

在擺脫此錯誤的請幫助。 在此先感謝。

Answer 1

將復位按鈕的類型設置爲'按鈕'應該可以工作。以下代碼在我的機器上完美工作。

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