How Do I sove this “Cannot read property 'reset' of null” in AngularJS?
Question
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.
//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 answers
solution1
0 2017-01-19 18:38:33
AngularJs has ngModel to handle forms. 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.
solution2
0 2017-01-19 19:18:33
Extra </body> and </form> tags in the bottom, Remove them first.
Do not use document APi in Angular controller.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I solve this “Cannot read property 'appendChild' of null” error?
How do I fix Cannot read property 'style' of null in JavaScript?
AngularJS Unknown TypeError: Cannot Read Property '1' Of Null
Why do I get 'cannot read property of value at null' error?
Why do I get a "Cannot read property 'click' of null error
why do i get Cannot read property 'style' of null?
How do I solve this? “Uncaught TypeError: Cannot read property 'appendChild' of null”
Discord.js: Cannot Read Property “Name” of Null - How do I fix this?
Uncaught TypeError: Cannot read property 'reset' of null in Javascript
Uncaught TypeError: Cannot read property 'reset' of null in Phaser
Related Tags