Question

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

但是，当我提交并调用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 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();
 }

Answer 1

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

}

Answer 2

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

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

2 个答案: