제출 및 재설정 버튼으로 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>