我正在尝试使用angularjs进行验证表单,到目前为止我做得很好。但是,当我提交我的重置按钮时,除了我从验证部分得到的错误消息之外,所有字段都会重置。重置表单时如何摆脱所有字段和错误消息。
当我按下重置按钮时就是这样
这是我的代码
<div class="page-header"><center><h2>Give us your Feedback</h2></center></div> <!-- pass in the variable if our form is valid or invalid --> <form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate> <!-- NAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }"> <label>Name*</label> <input type="text" name="name" class="item-input-wrapper form-control" ng-model="user.name" required> <p ng-show="userForm.name.$invalid && !userForm.name.$pristine " class="help-block"> <font color="#009ACD">You name is required.</font> </p> </div> <!-- EMAIL --> <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty }"> <label>Email</label> <input type="email" name="email" class="item-input-wrapper form-control" ng-model="user.email" required > <p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block"> <font color="#009ACD">Enter a valid email.</font> </p> </div> <!-- USERNAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }"> <label>Description</label> <input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username" ng-minlength="5" ng-maxlength="60" required> <font color="white"> <p ng-show="userForm.username.$error.minlength" class="help-block"> <font color="#009ACD">Description is too short.</font> </p> <p ng-show="userForm.username.$error.maxlength" class="help-block"> <font color="#009ACD">Description is too long.</font> </p> </font> </div> <div class="col"style="text-align: center"> <button align="left"class="button button-block button-reset"style="display: inline-block;width:100px;text-align:center " type="reset" ng-click="reset()" padding-top="true" > Reset </button> <button class="button button-block button-positive" style="display: inline-block;width:100px " ng-click="submit()" padding-top="true" > Submit </button> </div> </form> </div>
我的控制器
.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) { $scope.showfeedback = function() { $state.go('app.sfeedback'); }; $scope.submitForm = function(isValid) { $scope.submitted = true; // check to make sure the form is completely valid if (!isValid) { var alertPopup = $ionicPopup.alert({ title: 'Invalid data entered!', }); } else { var alertPopup = $ionicPopup.alert({ title: 'Feedback submitted', }); } }; $scope.reset = function() { var original = $scope.user; $scope.user= angular.copy(original) $scope.userForm.$setPristine() }; })
var original = $scope.user;
重置时:
$scope.user= angular.copy(original); $scope.userForm.$setPristine();
去掉
type='reset' in <button>
这是表单控制器的Angular 文档。