复位后的形式验证消息不会被删除 [英] Validation messages not removed after resetting the form

问题描述

我有一个HTML表单，我采用了棱角分明的JS进行验证。在这里，提交表单后，我打电话复位的方法将重置表单输入字段为默认值。

但是，当我提出和呼叫复位法，验证消息出现在输入字段中。我已经使用了低于code。我不想在提交表单后看到的验证消息。

HTML

 ＆LT;表格名称=createvalidation角色=形式级=COL-LG-12NOVALIDATE＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT;输入类型=文本占位符=挑战名字级=的形式控制输入-SMNAME =名NG-模式=challenge.challengename要求＆GT;
        ＆LT;跨度NG-秀=（。createvalidation.name $脏||提交）及和放大器; createvalidation.name $ error.required。＆GT;的名字是reqiured＆LT; / SPAN＆GT;
    ＆LT; / DIV＆GT;    ＆LT; D​​IV CLASS =表单组＆GT;
        ＆LT; TextArea类=的形式控制输入-SM行=2占位=写更多关于这个挑战。NAME =说明NG模型=challenge.challengedescription要求＆GT;＆LT; / textarea的＆GT ;
        ＆所述;跨度纳克秀=（。createvalidation.description $脏||提交）及＆放大器; challengecreatevalidation.description $ error.required。＆。说明例是reqiured＆下; /跨度＆GT;
    ＆LT; / DIV＆GT;
＆LT; /表及GT;
＆LT; D​​IV＆GT;    ＆LT;按钮式=按钮NG点击=createChallenge（）＆GT;创建＆LT; /按钮＆GT;
＆LT; / DIV＆GT;
 

JS code

  $ scope.createChallenge =功能（）{
     //获取数据库中的字段和存储
     $ scope.resetForm（）;
 }
 $ scope.master = {};
 $ scope.resetForm =功能（）{     $ scope.challenge = angular.copy（$ scope.master）;
     。$ scope.createvalidation $ setPristine（）;
 }
 

解决方案

  $ scope.createChallenge =功能（）{
  //获取数据库中的字段和存储
 $ scope.resetForm（）;
 } $ scope.master = {};
 $ scope.resetForm =功能（）{
 $ scope.submitted = FALSE; //尝试添加该
 $ scope.challenge = angular.copy（$ scope.master）;
 。$ scope.createvalidation $ setPristine（）;
 

}

I have a html form and I am using angular JS for validation. Here, after submitting the form I am calling the reset method which will reset the form input fields to default.

But, when I submit and call reset method, the validation messages appears in the input field. I have used the below code. I don't want to see the validation messages after submitting the form.

HTML

<form name="createvalidation" role="form" class="col-lg-12" novalidate>
    <div class="form-group">

    </div>
    <div class="form-group">
        <input type="text" placeholder="Challenge name" class="form-control input-sm" name="name" ng-model="challenge.challengename" required>
        <span ng-show="(createvalidation.name.$dirty || submitted) && createvalidation.name.$error.required">Name is reqiured</span>
    </div>

    <div class="form-group">
        <textarea class="form-control input-sm" rows="2" placeholder="Write more about this challenge..." name="description" ng-model="challenge.challengedescription" required></textarea>
        <span ng-show="(createvalidation.description.$dirty || submitted) && challengecreatevalidation.description.$error.required">Description is reqiured</span>
    </div>
</form>
<div>

    <button type="button" ng-click="createChallenge()">Create</button>
</div>

JS CODE

 $scope.createChallenge = function() {
     //get the field and store in db
     $scope.resetForm();
 }
 $scope.master = {};
 $scope.resetForm = function() {

     $scope.challenge = angular.copy($scope.master);
     $scope.createvalidation.$setPristine();
 }

解决方案

$scope.createChallenge = function() {
  //get the field and store in db
 $scope.resetForm();
 }

 $scope.master = {};
 $scope.resetForm = function() {
 $scope.submitted = false; //Try adding this
 $scope.challenge = angular.copy($scope.master);
 $scope.createvalidation.$setPristine();

}

这篇关于复位后的形式验证消息不会被删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！