1
로컬 저장소에 데이터를 저장해야하지만 양식을 확인해야합니다. SavelocalStorage 함수를 호출 한 후 실수가 있습니다 TypeError: Cannot read property '$valid' of undefined. 뭐가 문제 야? 어떤 도움을 주신
ps $scope.myForm.$valid의 경우 myForm.$valid으로 바뀌면 유효하지만 부적절한 방법입니다. 모든 간격을 채운 후에도 팝업 경고 경고가 계속 표시됩니다. 당신이 부모와 함께 controllerAs 구문을 사용하는 경우
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>
(_had jsfiddle_에서 그것을 확인) $ scope.myForm''와 구문은 올바른 것입니다. 그러나 문제는 중첩 된 컨트롤러가 있다는 것입니다. '$ scope.myForm'은 폼이 자식 컨트롤러'booksCtrl'에 있기 때문에 정의되지 않았습니다. 외부 컨트롤러 인'myCtrl'에서 액세스하려고합니다. –
유효성 검사 섹션을 내부 컨트롤러로 이동해야합니까? –