如何在AngularJS中播种“无法读取null的属性'reset'”？
[英]How Do I sove this “Cannot read property 'reset' of null” in AngularJS?
问题描述
we have to clear the data of the form after the user is click on the submit button.i will be provided the id to the clear the form but form is not not reset.i am using javaScript reset() function to clear the data.how to solve this. 
我们必须在用户单击提交按钮后清除表单数据。我将获得清除表单的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>
2 个解决方案
解决方案1
0 2017-01-19 18:38:33
AngularJs has ngModel to handle forms. AngularJs具有ngModel来处理表单。 Use that instead. 改用它。
Then, to clear the form, you simply set the form data object to new empty object and call $scope.$apply() *if calling outside of angular digest cycle * This will clear the form for you. 然后，要清除表单，只需将表单数据对象设置为新的空对象，然后调用$ scope。$ apply（）*如果在角度摘要循环之外调用*这将为您清除表单。
解决方案2
0 2017-01-19 19:18:33
Extra </body> and </form> tags in the bottom, Remove them first. 底部的</body>和</form>标记，请先将其删除。
Do not use document APi in Angular controller. 不要在Angular控制器中使用文档APi。
This should work 这应该工作
$scope.user.eid ="";
$scope.user.email ="";
$scope.user.city ="";
$scope.user.salary ="";
$scope.user.date ="";
for cleaner code you can wrap it in a function clear and call. 对于更干净的代码，您可以将其包装在一个clear的函数中并调用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
我如何解决这个“无法读取属性'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
为什么会出现“无法读取null值的属性”错误？ - Why do I get 'cannot read property of value at null' error?
为什么我得到一个“无法读取属性”点击'null错误 - Why do I get a "Cannot read property 'click' of null error
为什么我无法读取 null 的属性“样式”？ - why do i get Cannot read property 'style' 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
相关标签