Angularjs：提交后清除表单不起作用

Question

你好。我正在学习 Angularjs，但我无法弄清楚我的代码有什么问题。在提交用户、评论、投票和日期后，我正在尝试清除表单。对象被推送到 cmets 数组，但表单继续显示数据。非常感谢！

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 设置为原始，它将数据标记为用户未修改，但实际上并未重置任何数据。 submitComment 的最后一步应该是将 newCommentCon.comment 和您关心的任何其他字段设置回空字符串。

这个其他问题也可能对 setPristine 有所启发：$setPristine() not working.

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);
}