Как очистить или сбросить данные в форме в angularjs?

Question

Было обнаружено, как очистить данные формы с помощью угловой и $ setPristine функции, но все же никаких результатов всегда дает мне ошибку, говоря, что $ setPristine не является функцией. Может ли кто-нибудь помочь мне в решении?

вот мой angular.controller

$scope.AddCustomer = function() { 

      var CustDetails = { 
       cname: $scope.CusDetails.cname, 
       comname: $scope.CusDetails.comname, 
       tel: $scope.CusDetails.tel, 
       email: $scope.CusDetails.email 

      };   

      CustService.Customer(CustDetails, function (res) { 
       console.log(res); 

       $.extend($.gritter.options, { 
        position: 'bottom-right', 
       }); 

       if (res.data == 'success') { 
        $.gritter.add({ 

         title: 'Success!', 
         text: 'Successfully added the new customer ' + '<h4><span class="label label-primary">' + CustDetails.cname + '</span></h4>', 
         time: '5000', 
         close_icon: 'l-arrows-remove s16', 
         icon: 'glyphicon glyphicon-ok-circle', 
         class_name: 'success-notice' 
        }); 

        //CustDetails = {}; 

        customerForm.$setPristine(true); 
       } 
       else { 
        $.gritter.add({ 
         title: 'Failed!', 
         text: 'Failed to add a new customer', 
         time: '5000', 
         close_icon: 'l-arrows-remove s16', 
         icon: 'glyphicon glyphicon-remove-circle', 
         class_name: 'error-notice' 
        }); 
       } 


      });   
     } 

Вот код HTML

<div ng-controller="AddCustomerController"> 
    <div class="page-content-wrapper"> 
     <div class="page-content-inner"> 
      <div id="page-header" class="clearfix"> 
       <div class="page-header"> 
        <h2>Add Customer</h2> 
        <span class="txt">Create and add new customer.</span> 
       </div> 
      </div> 

      <!--Start .row--> 
      <div class="row"> 
       <div class="col-md-1"> 
       </div> 

       <div class="col-lg-9 col-sm-9 col-xs-12"> 
        <!--col-lg-9 starts here--> 
        <div class="panel panel-default toggle panelMove panelClose panelRefresh"> 
         <div class="panel-heading"> 
          <h4 class="panel-title">Customer Details</h4> 
         </div> 
         <div class="panel-body pt0 pb0"> 
          <form class="form-horizontal group-border stripped" id="customerForm"> 
           <div class="form-group"> 
            <label class="col-lg-2 col-md-3 control-label">Customer Name</label> 
            <div class="col-lg-10 col-md-9"> 
             <input type="text" required id="cname" ng-model="CusDetails.cname" class="form-control" name="cname" /> 
            </div> 
           </div> 
           <!--end of .form-group--> 
           <div class="form-group"> 
            <label class="col-lg-2 col-md-3 control-label">Company Name</label> 
            <div class="col-lg-10 col-md-9"> 
             <input type="text" required id="comname" ng-model="CusDetails.comname" class="form-control" name="comname" /> 
            </div> 
           </div> 
           <!--end of .form-group--> 
           <div class="form-group"> 
            <label class="col-lg-2 col-md-3 control-label" for="">Telephone Number</label> 
            <div class="col-lg-10 col-md-9"> 
             <div class="input-group input-icon"> 
              <span class="input-group-addon"><i class="fa fa-phone s16"></i></span> 
              <input ng-model="CusDetails.tel" class="form-control" id="ctel" type="text" placeholder="(999) 999-9999"> 
             </div> 
            </div> 
           </div> 
           <!-- End .form-group --> 
           <div class="form-group"> 
            <label class="col-lg-2 col-md-3 control-label" for="">Email address</label> 
            <div class="col-lg-10 col-md-9"> 
             <input id="email" ng-model="CusDetails.email" type="text" class="form-control" name="placeholder" placeholder="someone@example.com"> 
            </div> 
           </div> 
           <!-- End .form-group --> 
          </form> 
         </div> 
        </div> 
        <!--End .panel--> 
       </div> 
       <!--.col-9 ends here--> 
      </div> 
      <!--End .row--> 
      <!--Start .row--> 
      <div class="row"> 
       <div class="col-md-1"></div> 
       <div class="col-lg-9 col-sm-9 col-xs-12"> 
        <button id="btnSubmit" type="submit" ng-click="AddCustomer()" class="btn btn-info pad"><span class="fa fa-user-plus"></span> Add Customer</button> 
        <button type="submit" class="btn btn-default pad">Cancel</button> 
       </div> 
      </div> 
     </diV> 
    </div> 
</div> 

Answer 1

Вы можете удалить значение поля формы путем удаления значения нг-модели, как

Ваш код

var CustDetails = { 
       cname: $scope.CusDetails.cname, 
       comname: $scope.CusDetails.comname, 
       tel: $scope.CusDetails.tel, 
       email: $scope.CusDetails.email 

      }; 

Заменить на это

$scope.CustDetails = { 
       cname: $scope.CusDetails.cname, 
       comname: $scope.CusDetails.comname, 
       tel: $scope.CusDetails.tel, 
       email: $scope.CusDetails.email 

      }; 

Ваш код

customerForm.$setPristine(true); 

Заменить этот

$scope.CustDetails={}; 

Answer 2

Использование

$scope.customerForm.$setPristine(true); 

Дайте форме имя, как

name= "CusDetails" 

Тогда он решит проблему.

Answer 3

использование:

$scope.$destroy 

как он удаляет все дети, связанные с родительской области и будут удалены все данные, связанные с ним.

Answer 4

1. Использование имя attr вместо id. name="forName"
2. Эталонная форма внутри контроллера будет $scope.formName

Answer 5

Вы можете установить форму с кодом ниже:

$scope.customerForm.$setPristine(); 
$scope.customerForm.$setUntouched(); 
$scope.CustDetails={};