[英]How Do I sove this “Cannot read property 'reset' of null” in AngularJS?
我们必须在用户单击提交按钮后清除表单数据。我将获得清除表单的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()">×</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">×</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">× </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">×</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的函数中并调用。
我如何解决这个“无法读取属性'appendChild'的null”错误？
[英]How do I solve this “Cannot read property 'appendChild' of null” error?
如何修复无法读取 JavaScript 中 null 的属性“样式”？
[英]How do I fix Cannot read property 'style' of null in JavaScript?
AngularJS Unknown TypeError：无法读取Null属性'1'
[英]AngularJS Unknown TypeError: Cannot Read Property '1' Of Null
我该如何解决？ “未捕获的TypeError：无法读取null的属性'appendChild'”
[英]How do I solve this? “Uncaught TypeError: Cannot read property 'appendChild' of null”
Discord.js：无法读取Null的属性“名称”-我该如何解决？
[英]Discord.js: Cannot Read Property “Name” of Null - How do I fix this?
未捕获的类型错误：无法在 Javascript 中读取 null 的属性“重置”
[英]Uncaught TypeError: Cannot read property 'reset' of null in Javascript
未被捕获的TypeError：无法在Phaser中读取null的属性“重置”
[英]Uncaught TypeError: Cannot read property 'reset' of null in Phaser
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.