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

Question

我有一个 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();
 }

Answer 1

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

Answer 2

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

}