Angularjs：clear提出後にフォームが動作しない

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

あなたがapp.js.に "ステップ5" を逃しているように見えますあなたは、ユーザーがデータを変更していないとマークするが、実際にはデータをリセットするわけではありません。 submitCommentの最後のステップは、newCommentCon.commentと気にするフィールドを空の文字列に戻すことです。

この他の質問もsetPristineにいくつかの光を当てることがあります。$setPristine() not working.

Answer 2

私は同じ問題を持っていた、私はそれを手動でやってしまいました。

.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 3

フォームを消去したい場合は、ボタン送信時にng-click = 'function（data）'を追加してすべてのデータを収集する必要があります。こちらのフォームなし例：angularjs上

<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> 

、送信されたデータに対応するために、関数submitComment を作成します。

$scope.submitComment = function (data) { 

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

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

Answer 4

私はそれを得ました。

$scope.commentForm.$setPristine(); 

の代わりに：：

完了

commentForm.$setPristine(); 

それは本当に愚かな間違いでした。助けてくれてありがとう