angularjs 表单重置错误
[英] angularjs form reset error
本文介绍了angularjs 表单重置错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 angularjs 做一个带有验证的表单，到目前为止我做得很好.但是当我提交我的重置按钮时，所有字段都会重置，除了我从验证部分得到的错误消息.重置表单时，如何清除所有字段和错误消息.
这是我按下重置按钮时的样子
这是我的代码
<div class="page-header"><center><h2>给我们您的反馈</h2></center></div><!-- 如果我们的表单有效或无效，则传入变量--><form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate><!-- 名称--><div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$dirty }"><label>姓名*</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">您的姓名是必填项.</font></p> <!-- 电子邮件--><div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && !userForm.email.$dirty }"><label>电子邮件</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">输入有效的电子邮件.</font></p>
<!-- 用户名--><div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && !userForm.username.$dirty }"><label>描述</label><input type="text" name="username" class="item-input-wrapper form-control" ng-model="user.username" ng-minlength="5" ng-maxlength="60" required><字体颜色=白色"><p ng-show="userForm.username.$error.minlength" class="help-block"><font color="#009ACD">描述太短.</font></p><p ng-show="userForm.username.$error.maxlength" class="help-block"><font color="#009ACD">描述太长.</font></p>
<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"类型=重置"ng-click="reset()" padding-top="true">重启<button class="button button-block button-positive" style="display: inline-block;width:100px "ng-click="提交()"填充顶=真">提交
</表单>
我的控制器
.controller('ContactCtrl', function($scope,$state,$ionicPopup, $timeout) {$scope.showfeedback = function() {$state.go('app.sfeedback');};$scope.submitForm = function(isValid) {$scope.submitted = true;//检查以确保表单完全有效如果(！isValid){var alertPopup = $ionicPopup.alert({title: '输入的数据无效！',});} 别的 {var alertPopup = $ionicPopup.alert({title: '反馈已提交',});}};$scope.reset = function() {var original = $scope.user;$scope.user= angular.copy(原始)$scope.userForm.$setPristine()};})
解决方案
var original = $scope.user;重置时:
$scope.user= angular.copy(original);$scope.userForm.$setPristine();删除
type='reset' in 这里是表单控制器的 Angular 文档 .
i'm trying to do a form with validations using angularjs and so far i did a good job. But when i commit my reset button all the fields reset except for the error messages i get from my validation part. How can i get rid of all the fields and error messages when i reset my form.
This is how it is when i press my reset button
this is my code
<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>
My controller
.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;
when resetting :
$scope.user= angular.copy(original);
$scope.userForm.$setPristine();
remove
type='reset' in <button>
here is the Angular Documentation for form controllers.
这篇关于angularjs 表单重置错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
