angularjs形式复位错误 [英] angularjs form reset error
本文介绍了angularjs形式复位错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图做使用angularjs现在为止，我的工作做得很好验证的一种形式。但是，当我将我的复位按钮，所有字段重置除了错误信息，我从我的验证的一部分得到。我怎样才能摆脱所有字段和错误消息时重置我的表单。
这是怎么回事，当我preSS我的复位按钮
这是我的code
＆LT; DIV CLASS =页面页眉＆GT;＆LT;中心＆GT;＆LT; H2＆GT;给我们您的反馈和LT; / H＆GT;＆LT; /中心＆GT;＆LT; / DIV＆GT;
＆LT;！ - 传中变量如果我们的形式是有效还是无效 - ＆GT;
＆LT;表格名称=窗体NG提交=submitForm（$用户窗体有效）。NOVALIDATE＆GT;
＆LT;！ - 姓名 - ＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：！userForm.name $无效和放大器;＆安培; userForm.name $脏}＆GT;
＆LT;标签＆gt;名称* LT; /标签＆gt;
＆LT;输入类型=文本名称=名字级=项，输入包装形式控制NG模型=user.name必需的＆GT;
＆LT; p NG秀=userForm.name $无效和放大器;＆安培;！userForm.name $质朴。阶级=帮助块＆GT;＆LT;字体颜色=＃009ACD＆gt;的需要，您的名字＆所述; /字体＆GT;＆下; / p＆GT;
＆LT; / DIV＆GT; ＆LT;！ - 电子邮件 - ＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：userForm.email $无效和放大器;＆安培; userForm.email $脏！}＆GT;
＆LT;标签＆gt;电子邮件和LT; /标签＆gt;
＆LT;输入类型=电子邮件NAME =电子邮件级=项，输入包装形式控制NG模型=user.email要求＆GT;
＆LT; p NG秀=。userForm.email $无效和放大器;＆安培;！userForm.email $质朴。阶级=帮助块＆GT;＆LT;字体颜色=＃009ACD＆GT;输入有效的电子邮件＆所述; /字体＆GT;＆下; / p＆GT;
＆LT; / DIV＆GT; ＆LT;！ - USERNAME - ＆GT;
＆LT; DIV CLASS =表单组NG-CLASS ={'有错误：！userForm.username $无效和放大器;＆安培; userForm.username $脏}＆GT;
＆LT;标签＆gt;说明与LT; /标签＆gt;
＆LT;输入类型=文本名称=用户名级=项，输入包装形式控制NG模型=user.usernameNG-MINLENGTH个=5NG-MAXLENGTH =60所需的＆GT;
＆LT;字体颜色=白色＆GT;＆LT; p NG秀=userForm.username $ error.minlength。阶级=帮助块＆GT;＆LT;字体颜色=＃009ACD＆GT;简介太短＆LT; / FONT＆GT;＆LT; / p＆GT;
＆LT; p NG秀=userForm.username $ error.maxlength。阶级=帮助块＆GT;＆LT;字体颜色=＃009ACD＆GT;简介太长＆LT; / FONT＆GT;＆LT; / p＆GT;
＆LT; / DIV＆GT; ＆LT; DIV CLASS =山坳的风格=文本对齐：中心＆GT;
＆LT;按钮align =left级=按钮按钮按钮块复位的风格=显示：inline-block的;宽度：100像素;文本对齐：中心
键入=复位
NG-点击=reset（）的填充顶=真正的＆GT;复位＆LT; /按钮＆GT;
＆LT;按钮类=按钮按钮按钮块阳性的风格=显示：inline-block的;宽度：100像素
NG-点击=提交（）填充顶=真正的＆GT;提交＆LT; /按钮＆GT;
＆LT; / DIV＆GT; ＆LT; /表及GT;
＆LT; / DIV＆GT;
＆LT; /离子含量＆GT;
＆LT; /离子视图＆gt;
我的控制器
.controller（'ContactCtrl'，函数（$范围，$状态，$ ionicPopup，$超时）{
$ scope.showfeedback =功能（）{
$ state.go（'app.sfeedback'）; }; $ scope.submitForm =功能（的isValid）{
$ scope.submitted = TRUE;
//检查，以确保形式是完全有效
如果（！的isValid）{
VAR alertPopup = $ ionicPopup.alert（{
标题：无效的输入的数据！，
}）;
}
其他{
VAR alertPopup = $ ionicPopup.alert（{
标题：提交反馈，
}）;
}
}; $ scope.reset =功能（）{
VAR原= $ scope.user;
$ scope.user = angular.copy（原创）
$ scope.userForm。$ setPristine（）
}; }）
解决方案
VAR原= $ scope.user;
重置时：
$ scope.user = angular.copy（原创）
$ scope.userForm。$ setPristine（）
删除
键入＆LT =重置按钮＆GT;
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>
</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>
</ion-content>
</ion-view>
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>
这篇关于angularjs形式复位错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
