如何清除或重置angularjs中的表单中的数据？

一直在寻找如何使用angular和$ setPristine函数清除表单数据，但仍然没有结果总是给我一个错误，说$ setPristine不是函数。任何人都可以帮助我解决问题吗？如何清除或重置angularjs中的表单中的数据？

这里是我的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="[email protected]"> 
            </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>

来源

2016-07-27 Ashane Alvis

您能分享此HTML代码吗？ – pdorgambide

@pdorgambide添加了html代码。 :) –

您可以通过NG-模型去除值一样

你的代码中删除表单字段值

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={};

来源

2016-07-27 06:37:37

谢谢。有效。 –

@AshaneAlvis任何时候 –

使用

$scope.customerForm.$setPristine(true);

提供的格式如

name= "CusDetails"

名称

然后它会解决问题。

来源

2016-07-27 05:51:55 Anuradha

没有然后它说$ scope.customerForm是undefined –

使用：

$scope.$destroy

，因为它消除关联父作用域的所有儿童，并清除与之相关的所有数据。

来源

2016-07-27 06:00:02

使用名称 attr而不是id。 name="forName"
内部控制的形式引用将$scope.formName

来源

2016-07-27 06:10:09 pdorgambide

您可以设置与下面的代码的形式：

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

来源

2016-10-26 16:31:28 Hetdev

如何清除或重置angularjs中的表单中的数据？

回答

相关问题