提交后如何清除angularJS表格？

Question

I have save method on modal window once user execute save method i want to clear the form fields, I have implemented $setPristine after save but its not clearing the form. How to achieve that task using angularJS ?

So far tried code.... main.html

<div>
    <form name="addRiskForm" novalidate  ng-controller="TopRiskCtrl" class="border-box-sizing">
        <div class="row">
                <div class="form-group col-md-12 fieldHeight">
                    <label for="topRiskName" class="required col-md-4">Top Risk Name:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="topRiskName" ng-model="topRiskDTO.topRiskName"
                            name="topRiskName" required> 
                                <p class="text-danger" ng-show="addRiskForm.topRiskName.$touched && addRiskForm.topRiskName.$error.required">Top risk Name is required field</p>
                    </div>
                </div>
        </div>
        <div class="row">
                <div class="form-group col-md-12">
                    <label for="issuePltfLookUpCode" class="col-md-4">Corresponing Issue Platform:</label>
                    <div class="col-md-8">
                        <select 
                            kendo-drop-down-list
                            data-text-field="'text'"
                            data-value-field="'id'" name="issuePltfLookUpCode"
                            k-option-label="'Select'"
                            ng-model="topRiskDTO.issuePltfLookUpCode"
                            k-data-source="issuePltDataSource"
                            id="issuePltfLookUpCode">           
                        </select>   
                    </div>
                </div>
        </div>
        <div class="row">
                <div class="form-group col-md-12 fieldHeight">
                    <label for="issueNo" class="col-md-4">Issue/Risk Number:</label>
                    <div class="col-md-8">
                        <input type="text" class="form-control" id="issueNo" ng-model="topRiskDTO.issueNo"
                            name="issueNo"> 
                    </div>
                </div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary pull-right" ng-disabled="addRiskForm.$invalid" ng-click="submit()">Save</button>
            <button class="btn btn-primary pull-right" ng-click="handleCancel">Cancel</button>
        </div>
    </form>
</div>

main.js

$scope.$on('addTopRisk', function (s,id){
        $scope.riskAssessmentDTO.riskAssessmentKey = id;
        $scope.viewTopRiskWin.open().center();
        $scope.submit = function(){
          rcsaAssessmentFactory.saveTopRisk($scope.topRiskDTO,id).then(function(){
            $scope.viewTopRiskWin.close();
            $scope.$emit('refreshTopRiskGrid');
            $scope.addRiskForm.$setPristine();
          });
        };

      });

Answer 1

Hey interesting question and I have messed around with it and I have come up with something like this (I have abstracted the problem and simplified it, it is up to you to implent it to your likings). Likely not super elegant but it does the job: Fiddle

<div ng-app="app">
    <div ng-controller="main">
        <form id="form">
            <input type="text" />
            <input type="text" />
        </form>
        <button ng-click="clear()">clear</button>
    </div>
</div>

JS

angular.module("app", [])
.controller("main", function ($scope) {
    $scope.clear = function () {
        var inputs = angular.element(document.querySelector('#form')).children();
        angular.forEach(inputs, function (value) {
            value.value="";
        });

    };
})

Hope it helps.

Edit

If you give all your inputs that must be cleared a shared class you can select them with the querySelector and erase the fields.

Answer 2

Refer to this page: http://blog.hugeaim.com/2013/04/07/clearing-a-form-with-angularjs/

$setPristine will only clear the variables not the form. To clear the form set their values to blank strings

<script type="text/javascript">
      function CommentController($scope) {
          var defaultForm = {
              author : "",
              email : "",
              comment: ""
          };
          $scope.postComments = function(comment){
              //make the record pristine
              $scope.commentForm.$setPristine();
              $scope.comment = defaultForm;
          };
      }
    </script> 

Answer 3

Clear topRiskDTO

Looking at your example, seems that clearing topRiskDTO will give you this result.

for instance:

$scope.submit = function(){
    // ...
    // The submit logic

    // When done, Clear topRiskDTO object
    for (var key in $scope.topRiskDTO)
    {
        delete $scope.topRiskDTO[key];
    }
};

Answer 4

You have to manually reset the data. See this website for more info. You also have to call

$form.$setPristine()

To clear all the css classes.