2016-04-20 28 views
2

我正在开发一个应用程序,我在这里使用引导程序和角度。使用angular和bootstrap的表单验证工作正常,但我有一个问题来重置表单。我调用$ setPristine(),但它似乎没有做任何事情。角度重置表单无法正常工作

这是我的html。

<div class="cl-xs-12" style="margin-top:20px"> 
<div class="col-xs-3"></div> 
<div ng-controller="AddUpdateUserController" class="col-xs-6"> 
    <form class="form-horizontal" role="form" id="addEditMemberForm" name="addEditMemberForm" ng-submit="addUpdateMember(member)" novalidate> 
     <input type="hidden" id="mmeberId", name="memberId" ng-model="member.id"> 
     <div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.firstName.$invalid && addEditMemberForm.firstName.$dirty}"> 
      <label for="firstName" class="control-label col-xs-4">First Name</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" ng-model="member.firstName" ng-pattern="/^[0-9A-Za-z]+$/" required> 
       <div ng-show="addEditMemberForm.$submitted || addEditMemberForm.firstName.$touched" ng-messages="addEditMemberForm.firstName.$error"> 
        <div ng-show="addEditMemberForm.firstName.$error.required" class="validationErrorMessage">First Name is required</div> 
        <div class="validationErrorMessage" ng-message="pattern">First name is invalid. Only Alphanumeric characters are allowed</div> 
       </div> 
      </div> 
     </div> 
     <div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.middleName.$invalid && addEditMemberForm.middleName.$dirty}"> 
      <label for="lastName" class="control-label col-xs-4">Middle Name</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control" id="middleName" name="middleName" placeholder="Middle Name" ng-model="member.middleName" ng-pattern="/^[0-9A-Za-z]+$/" required> 
       <div ng-show="addEditMemberForm.$submitted || addEditMemberForm.middleName.$touched" ng-messages="addEditMemberForm.middleName.$error"> 
        <div class="validationErrorMessage" ng-message="required">Middle name is required.</div> 
        <div class="validationErrorMessage" ng-message="pattern">Middle name is invalid. . Only Alphanumeric characters are allowed</div> 
       </div> 
      </div> 
     </div> 
     <div class="form-group required" ng-class="{ 'has-error': addEditMemberForm.lastName.$invalid && addEditMemberForm.lastName.$dirty}"> 
      <label for="lastName" class="control-label col-xs-4">Last Name</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" ng-model="member.lastName" ng-pattern="/^[0-9A-Za-z]+$/" required> 
       <div ng-show="addEditMemberForm.$submitted || addEditMemberForm.lastName.$touched" ng-messages="addEditMemberForm.lastName.$error"> 
        <div ng-show="addEditMemberForm.lastName.$error.required" class="validationErrorMessage">Last Name is required</div> 
        <div class="validationErrorMessage" ng-message="pattern">Last name is invalid. . Only Alphanumeric characters are allowed</div> 
       </div> 
      </div> 
     </div> 

    </form> 
    <div class="row"> 
     <label>{{message}}</label> 
    </div> 
    <label ng-model="status"></label> 
</div> 
<div class="col-xs-3"></div> 
</div> 

这里是我的javascript:

angular.module('SiteControllerModule').controller('AddUpdateUserController', ['$scope', '$http', '$location', function($scope, $http, $location){  
    $scope.resetForm = function() {    
     $scope.member = null; 
     $scope.addEditMemberForm.$setPristine();    
    } 
}]); 

当$ setPristine被调用时,我的状态还是很脏,看起来像它留下我的引导验证错误。

Form Still Dirty

与此相关的任何帮助表示赞赏。

感谢

+1

在这样更好的方式来显示你的代码的问题,问题是使用的服务,如https://jsfiddle.net/ – Damirchi

回答

1

试试这个太:

$scope.addEditMemberForm.$setPristine(); 
$scope.addEditMemberForm.$setUntouched(); 
+0

迭戈,这并不在技巧..非常感谢。 –

+0

我的荣幸..;) –