Angularjs: clear Form after submit not working

Question

Hi there. I'm learning Angularjs and I can't figure out wath's wrong with my code. I'm trying to clear the form after submitting user, comment, vote and date. The object is pushed to the comments array but the form keeps showing the data. Thanks a lot!

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

Max DG · Accepted Answer · 2016-05-09 03:37:23Z

1

I got it. It was a really stupid mistake:

  $scope.commentForm.$setPristine();

Instead of:

  commentForm.$setPristine();

Done. Thanks for the help anuway

answered May 9, 2016 at 3:37

Max DG

677 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:23:52Z

0

It looks like you're missing "Step 5" in your app.js. You've set the commentForm to be pristine which marks the data as un-modified by the user, but doesn't actually reset any data. The last step of your submitComment should be setting newCommentCon.comment and any other fields you care about back to empty strings.

This other question may also shed some light on setPristine: $setPristine() not working.

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered May 8, 2016 at 11:39

arbylee

2,1572 gold badges13 silver badges6 bronze badges

Comments

Shubham Aggarwal · Accepted Answer · 2016-05-08 11:39:59Z

I had the same issue, I ended up doing it manually.

.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
    }
}])

Okky Muhamad Budiman · Accepted Answer · 2016-05-08 12:09:06Z

0

if u want to clear form, u should add ng-click='function(data)' on button submit to collect all data. here example without form :

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

on angularjs, create function submitComment to accommodate the data being sent :

$scope.submitComment = function (data) {

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

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

answered May 8, 2016 at 12:09

Okky Muhamad Budiman

388 bronze badges

Collectives™ on Stack Overflow

Angularjs: clear Form after submit not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related