如何在 AngularJS 中设置此"Cannot read property 'reset' of null"？

用户点击提交按钮后，我们必须清除表单的数据。我将提供 ID 以清除表单，但表单不是不重置。我正在使用 javaScript reset（）函数来清除数据。如何解决这个问题。

//here we crate the module for the CRUD application here    
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
	//here we create the myService function for show the Dmmt array 
       $scope.user = myService.show();
       console.log($scope.user);
       //here we create the saveUser function for push the item into the list
		$scope.saveUser = function(){
			var data = 
					{
						eid:$scope.user.eid,
						email:$scope.user.email,
						city:$scope.user.city,
						salary:$scope.user.salary,
						date:$scope.user.date,
					}	
			//here we create will pass the user data to the myService of the show2 
			$scope.user =myService.show2(data);
			 //Here we clear the form data
			document.getElementById("clearData").reset();
			
	 		//Here we clear the form data without function
				// $scope.user.eid ="";
				// $scope.user.email ="";
				// $scope.user.city ="";
				// $scope.user.salary ="";
				// $scope.user.date ="";*/
					}
						
		//Calling setParam function  for the particular userDetails.
		
	    $scope.setParam = function(index){
	    	$scope.one = $scope.user[index];
	    	console.log($scope.one);
	    }
		//here we delete the deleteUser function for remove  the item into the lsit
		$scope.deleteUser = function(index){
				$scope.result3 =myService.show3(index);
				 console.log($scope.result3);
			}//close contrller here
			$scope.editeUser = function(x){
				$scope.ok= myService.editeUsers(x);
			}
});

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link href="bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <!-- include the angularjs files here-->
      <script src="angular.min.js"></script>
       <script src="jquery-1.12.4.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="bootstrap.min.js"></script>
      <script src="app/controller.js"></script>
      <script src="app/service.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      
  </head>
<body ng-controller="myCont">
 <div class="jumbotron">
   <div class="container">
    <button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button>
          <input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal
      <br>
       <input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Australia'" data-ng-false-value=''/> Australia<br>
      <input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Playboy'" data-ng-false-value=''/>Playboy
      <br>
       <input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
    <a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
   
  <div class="input-group">
    <input type="text" class="form-control" ng-model="search" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </div>
    </div>
      <div class="alert alert-info" ng-if="message">
          Info  <a href="#" class="close" ng-click="clear()">&times;</a>.
      </div>
      <table  class="w3-table w3-bordered">
        <thead>
          <tr>
               <th>User</th>
                <th>EmployeenName</th>
                <th>Email</th>
                <th>Salary</th>
                <th>City</th>
                <th>Date</th>              
          </tr>
        </thead>
        <tbody>
           <tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | orderBy:'salary' " 
           onclick="document.getElementById('id01').style.display='block'"
             ng-click ="setParam($index)" >
                <td style="max-height:61px;"><img src={{x.img}}></img></td>
                <td>{{x.eid}}</td>
                <td>{{x.email}} </td>
                <td>{{x.salary| currency}}</td>
                <td>{{x.city}}</td>
                <td>{{x.date | date:'dd/mm/yy'}}</td>
          <div style="float:right; margin-top:8px;"><p class="bg-primary">
              Total Count after Filtered-{{filtered.length}}</p>
          </div>
          <td>
              <button type="button"  class="btn btn-info" ng-click="isEditForm=true;">edit</button>
           </td>
           <td ng-show="isEditForm">
            <lable>Name</label><input ng-model="x.eid"/><br>
            <lable>Email</label><input ng-model="x.email"/><br>
            <lable>salary</label><input ng-model="x.salary"/><br>
            <lable>city</label><input ng-model="x.city"/><br>
              <lable>date</label><input ng-model="x.date"/><br>
              <button ng-click="isEditForm=false;">SAVE HERE</button>
           </td>
          <td>
              <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalDelete">Delete</button>
          </td>
        </tr>
          </tbody>
      </table>
    </div>
    </div> 
      <!-- Modal -->
	  //here we will provide the id for clear data 
      <form id="clearData">
      <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
        <!-- Modal content-->
          <div class="modal-content">
            <div class="modal-body">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">New User Registration</h4>
           </div>
               <div class="form-group">
                 <label class="control-label col-sm-2">Name</label>
                   <div class="col-sm-10">
                         <input type="text" class="form-control" name="eid" ng-model="user.eid" placeholder="Enter Name">
                  </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-sm-2">Email</label>
                   <div class="col-sm-10">
                         <input type="text" class="form-control" name="email" ng-model="user.email" placeholder="Enter Email">
                  </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-sm-2">City</label>
                   <div class="col-sm-10">
                         <input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city">
                  </div>
              </div>
              <div class="form-group">
                 <label class="control-label col-sm-2">Salary</label>
                   <div class="col-sm-10">
                         <input type="text" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
                  </div>
              </div>
                       <div class="form-group">
                 <label class="control-label col-sm-2">Date</label>
                   <div class="col-sm-10">
                         <input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date">
                  </div>
              </div>
                </div>
          <div class="form-group"> 
              <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default"  data-dismiss="modal"
                ng-click="saveUser()" >Submit</button>
                    </div>
                </div>
                   <div class="modal-footer">
                  </div>
                </div>
              </form>
            </div> <!-- here model body is closed-->
          </div> <!-- here model content is clo  sed-->
        </div>
      </div>
      <!-- Declare another model is declare for edit Modal -->
      <!--Here we creat the delete user model for dlete the user -->
      <div class="modal fade" id="myModalDelete" role="dialog">
         <div class="modal-dialog">
            <div class="modal-content">
                 <div class="modal-header"> 
                      <button type="button" class="close" data-dismiss="modal">&times;
                      </button>
                      <h4 class="modal-title">Are R Want to Delete </h4>
                  </div>
                    <div class="modal-body">
                        <strong style="color:blue;">
                          You re going to delete the {{one.eid}}</strong>
                      </h4>
                </div>
                 
                   <style type="text/css"></style>
                       <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes
                            </button>
                           <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                    </div>
               </div> <!-- here model body is closed-->
          </div> <!-- here model content is closed-->
        </div>
      </div>
    </div>
    </div>
<div class="w3-container">
  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px">
      <div class="w3-center"><br>
        <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">&times;</span>
        <img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top">
      </div>
      <form class="w3-container" action="form.asp">
        <table class="table table-striped">
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>City</th>
                <th>Date</th>
             </tr>
             <tr>
              <td>{{one.eid}}</td>
              <td>{{one.email}}</td>
              <td>{{one.salary}}</td>
              <td>{{one.city}}</td>
              <td>{{one.date}}</td>
               <span class="btn btn-info"><a href="https://angularjs.org/" target="_self">Follow Here</a></span>
        </table>
      </form>
    </div>
  </div>
</div> 
    </body>
  </form>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

AngularJs 有 ngModel 来处理表单。请改用它。

然后，要清除表单，您只需将表单数据对象设置为新的空对象并调用 $scope.$apply（） *如果在角摘要循环之外调用 * 这将为您清除表单。

底部的额外</body>和</form>标签，请先删除它们。

不要在 Angular 控制器中使用文档 APi。

这应该有效

$scope.user.eid ="";
$scope.user.email ="";
$scope.user.city ="";
$scope.user.salary ="";
$scope.user.date ="";

对于更干净的代码，您可以将其包装在函数clear中并调用。

相关内容

最新更新

热门标签：