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

完成。感谢您的帮助