AngularJS：提交后清除表格不起作用

Question

嗨，您好。 我正在学习Angularjs，但我无法弄清楚我的代码有什么错误。 我正在尝试在提交用户，评论，投票和日期后清除表单。 该对象被推送到注释数组，但是表单一直显示数据。 非常感谢！

menu.html

     <div ng-controller="DishCommentController">
           <form class="form-horizontal" name="commentForm" ng-submit="submitComment()" novalidate>
                <div class="form-group" ng-class="{ 'has-error' : commentForm.Name.$error.required && !commentForm.Name.$pristine }"> 
                    <label for="Name" class="col-sm-2 control-label">Your name</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="Name" name="Name" placeholder="Enter Name" required ng-model="newCommentCon.author" >
                        <span ng-show="commentForm.Name.$error.required && !commentForm.Name.$pristine" class="help-block">Your Name is required.</span> 
                    </div>
                </div>
                <div class="form-group">  
                    <label for="Number of Stars" class="col-sm-2 control-label">Number of Stars</label>
                    <div class="col-sm-10" >    
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="1"> 1
                        </label>
                        <label class="radio-inline">
                              <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="2"> 2
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="3"> 3
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio4" value="4"> 4
                        </label>
                        <label class="radio-inline" ng-model="newCommentCon.rating">
                            <input type="radio" name="inlineRadioOptions" id="inlineRadio5" value="5"  checked> 5
                        </label>
                    </div>
                </div>

                <div class="form-group" ng-class="{ 'has-error' : commentForm.Comment.$error.required && !commentForm.Comment.$pristine }" >
                    <label for="feedback" class="col-sm-2 control-label">Your comments</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" id="Comment" name="Comment" rows="12" placeholder="Enter a comment" ng-model="newCommentCon.comment" required>
                        </textarea>
                        <span ng-show="commentForm.Comment.$error.required && !commentForm.Comment.$pristine" class="help-block">Your comment is required.</span> 
                    </div>
                </div>  
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" value="submit" class="btn btn-primary" ng-disabled="!commentForm.$valid">Submit comment</button>
                    </div>
                </div>

            </form>
     </div>

app.js

.controller('DishCommentController', ['$scope', function($scope) {


       $scope.newCommentCon = {rating:"", comment:"", author:"", date:"",};



       $scope.submitComment = function () {



            //Step 2: This is how you record the date
            $scope.newCommentCon.date = new Date().toISOString();



            // Step 3: Push your comment into the dish's comment array
            $scope.dish.comments.push($scope.newCommentCon);

            //Step 4: reset your form to pristine
            commentForm.$setPristine();

            //Step 5: reset your JavaScript object that holds your comment
        }
    }])

Answer 1

我知道了。 这是一个非常愚蠢的错误：

  $scope.commentForm.$setPristine();

代替：

  commentForm.$setPristine();

做完了 感谢您的帮助

Answer 2

看来您在app.js中缺少“步骤5”。 您已将commentForm设置为原始状态，该状态将数据标记为用户未修改，但实际上并未重置任何数据。 您的commitComment的最后一步应该是将newCommentCon.comment和您关心的其他任何字段都设置为空字符串。

这个其他问题也可能使您对setPristine有所了解： $ setPristine（）不起作用。

Answer 3

我遇到了同样的问题，最终还是手动完成了。

.controller('DishCommentController', ['$scope', function($scope) {


   $scope.newCommentCon = {rating:"", comment:"", author:"", date:"",};



   $scope.submitComment = function () {



        //Step 2: This is how you record the date
        $scope.newCommentCon.date = new Date().toISOString();



        // Step 3: Push your comment into the dish's comment array
        $scope.dish.comments.push($scope.newCommentCon);

        //Step 4: reset your form to pristine
        //commentForm.$setPristine();

        $scope.newCommentCon = {};
       // adding this after your submit is successful would do it for   you.
       //this would work too $scope.newCommentCon = {rating:"", comment:"", author:"", date:"",};

        //Step 5: reset your JavaScript object that holds your comment
    }
}])

Answer 4

如果您想清除表格，则应在提交按钮上添加ng-click ='function（data）'以收集所有数据。 这里没有形式的例子：

 <div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
    <button type="submit" value="submit" class="btn btn-primary" ng-click="submitComment(newCommentCon)" ng-disabled="!commentForm.$valid">Submit comment
    </button>
  </div>
 </div>

在angularjs上，创建函数SubmitComment来容纳要发送的数据：

$scope.submitComment = function (data) {

    //call your data
    $scope.data.date = new Date().toISOString();

    console.log($scope.data.comment);
}