重置表单后未删除验证消息

Validation messages not removed after resetting the form

本文关键字：删除 验证 消息 表单      更新时间：2024-01-09

我有一个html表单，我使用angular JS进行验证。在这里，提交表单后，我将调用重置方法，该方法将表单输入字段重置为默认值。

但是，当我提交并调用reset方法时，验证消息会出现在输入字段中。我使用了以下代码。我不想在提交表单后看到验证消息。

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代码

 $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();

}

您似乎正在从的resetForm函数中复制表单的原始状态。这意味着当调用resetForm时，它将只具有表单的版本。相反，也许您应该在表单设置好并处于原始状态时进行复制。

相关文章：