angularjs形式验证。 TypeError：无法读取未定义的属性'$ valid'

问题描述 投票：1回答：1

我需要在本地存储中保存数据（保存按钮），但在我必须验证表单之前。在调用SavelocalStorage函数后有一个错误TypeError: Cannot read property '$valid' of undefined。怎么了？任何帮助赞赏

ps如果$scope.myForm.$valid替换为myForm.$valid验证工作但不恰当的方式。即使在填写所有空白后仍然弹出警报警告。

在删除数据验证的情况下，可以保存LS数据

var app = angular.module("myApp",['listOfBooks']);
            app.controller("myCtrl", function($scope){
                $scope.authors = [];

                $scope.addAuthor = function(){
                      var author = {};
                      author.surname = "";
                      author.name = "";
                      $scope.authors.push(author);
                };
                $scope.SavelocalStorage = function(){
                    if($scope.myForm.$valid){
                        localStorage.setItem('Authors', JSON.stringify($scope.authors));
                    }
                    else{
                        alert("fill in all the gaps pls!");
                    }
                };
            });
            
            var app = angular.module("listOfBooks", []);
        app.controller("booksCtrl", function($scope) {
          $scope.showBooks = false;
        
          $scope.currentAuthor = {};
          $scope.showBookList = function(author) {
            $scope.showBooks = !$scope.showBooks;
            $scope.currentAuthor = author;
          }
        
          $scope.addBook = function() {
           
            $scope.currentAuthor.books = $scope.currentAuthor.books || [];
            var book = {};
            book.title = "";
            $scope.currentAuthor.books.push(book);
          };
        });
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <div class="container">
    <h3>AUTHORS' LIST</h3>
    <div class="btn-group">
      <button ng-click="addAuthor()" type="button" class="btn btn-default">Add</button>
      <button ng-click="SavelocalStorage()" type="button" class="btn btn-default">Save</button>
    </div>
    <form ng-controller="booksCtrl" name="myForm">
      <table class="table table-bordered">
        <tr>
          <th>Surname</th>
          <th>Name</th>
          <th>Books</th>
        </tr>
        <tr ng-repeat="author in authors">
          <td><input ng-model="author.surname" required type="text" class="form-control"></td>
          <td><input ng-model="author.name" required type="text" class="form-control"></td>
          <td>
            <button ng-click="showBookList(author)" type="button" class="btn btn-default">List</button>
          </td>
        </tr>
      </table>

      <div ng-show="showBooks" class="col-sm-8" style="background-color:lightblue; position: absolute; left:5px; top:5px;z-index:2;">
        <div class="btn-group">
          <button ng-click="addBook()" type="button" class="btn btn-default">Add</button>
        </div>
        <table class="table table-bordered">
          <tr>
            <th>Title</th>
          </tr>
          <tr ng-repeat="book in currentAuthor.books">
            <td><input ng-model="book.title" type="text" class="form-control"></td>
          </tr>
        </table>
        <button class="btn btn-sm btn-warning" ng-click="showBooks = false">Close</button>
      </div>
    </form>
  </div>
      </body>
</html>
angularjs forms validation local-storage
1个回答
2
投票

您需要使用$scope继承一点点，当您使用controllerAs语法与父控制器时，如果您将booksCtrl中的表单名称设置为vm.myForm，由于JavaScript的原型继承，表单将注册到父$ scope，并且您可以在父$scope的表单上调用验证。

var app = angular.module("myApp",['listOfBooks']);
            app.controller("myCtrl", function($scope){
                $scope.authors = [];
                var vm = this;
                $scope.addAuthor = function(){
                      var author = {};
                      author.surname = "";
                      author.name = "";
                      $scope.authors.push(author);
                };
                $scope.SavelocalStorage = function(){
                    if(vm.myForm.$valid){
                        localStorage.setItem('Authors', JSON.stringify($scope.authors));
                    }
                    else{
                        alert("fill in all the gaps pls!");
                    }
                };
            });
            
            var app = angular.module("listOfBooks", []);
        app.controller("booksCtrl", function($scope) {
          $scope.showBooks = false;
        
          $scope.currentAuthor = {};
          $scope.showBookList = function(author) {
            $scope.showBooks = !$scope.showBooks;
            $scope.currentAuthor = author;
          }
        
          $scope.addBook = function() {
           
            $scope.currentAuthor.books = $scope.currentAuthor.books || [];
            var book = {};
            book.title = "";
            $scope.currentAuthor.books.push(book);
          };
        });
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
   
</head>

<body ng-app="myApp" ng-controller="myCtrl as vm">
  <div class="container">
    <h3>AUTHORS' LIST</h3>
    <div class="btn-group">
      <button ng-click="addAuthor()" type="button" class="btn btn-default">Add</button>
      <button ng-click="SavelocalStorage()" type="button" class="btn btn-default">Save</button>
    </div>
    <form ng-controller="booksCtrl" name="vm.myForm">
      <table class="table table-bordered">
        <tr>
          <th>Surname</th>
          <th>Name</th>
          <th>Books</th>
        </tr>
        <tr ng-repeat="author in authors">
          <td><input ng-model="author.surname" required type="text" class="form-control"></td>
          <td><input ng-model="author.name" required type="text" class="form-control"></td>
          <td>
            <button ng-click="showBookList(author)" type="button" class="btn btn-default">List</button>
          </td>
        </tr>
      </table>

      <div ng-show="showBooks" class="col-sm-8" style="background-color:lightblue; position: absolute; left:5px; top:5px;z-index:2;">
        <div class="btn-group">
          <button ng-click="addBook()" type="button" class="btn btn-default">Add</button>
        </div>
        <table class="table table-bordered">
          <tr>
            <th>Title</th>
          </tr>
          <tr ng-repeat="book in currentAuthor.books">
            <td><input ng-model="book.title" type="text" class="form-control"></td>
          </tr>
        </table>
        <button class="btn btn-sm btn-warning" ng-click="showBooks = false">Close</button>
      </div>
    </form>
  </div>
      </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.