AngularJS ng-repeat，ng-form和验证错误

Question

代码的简化版本：

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
    <script>
        var app = angular.module("main", []);
        app.controller("TestController", function($scope) {
            $scope.addresses = [{street: ""}, {street: ""}];
            $scope.next = function() {
                if ($scope.addressMainForm.addressForm.$valid) {
                    console.log("valid");
                } else {
                    console.log("invalid");
                }
                $scope.addresses.push({street: ""});
            };
            $scope.remove = function(index) {
                $scope.addresses.splice(index, 1);
            };
        });
    </script>
</head>
<body>

    <div ng-controller="TestController" style="width: 500px;">
        <form name="addressMainForm">
            <div ng-repeat="address in addresses">
                <ng-form name="addressForm">
                    <input ng-model="address.street" required name="street" type="text" placeholder="street" />
                    <button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
                </ng-form>
                <br>
            </div>
        </form>
        <br>
        <button ng-click="next()">NEXT</button>
    </div>

</body>
</html>

在浏览器中看起来像这样：

当我单击“删除”，然后单击“下一步”时-产生javascript错误：

Error: $scope.addressMainForm.addressForm is undefined

如果数组中显然还剩下一个元素，为什么未定义呢？ 否则，一切都将正常工作（ console.log输出），直到除去所有元素，但单击最后一个和“ NEXT”。

Answer 1

当您调用$scope.addressMainForm.addressForm.$valid ，您尝试调用check以查看adressForm元素是否有效，但是您的remove函数已删除了与该元素关联的addresses条目。 因此该表格确实仍然存在，但是该调用变得非法。

尝试这个：

<!DOCTYPE html>
<html ng-app="main">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="https://code.angularjs.org/1.4.3/angular.min.js"></script>
    <script>
        var app = angular.module("main", []);
        app.controller("TestController", function($scope) {
            $scope.addresses = [{street: ""}, {street: ""}];
            $scope.next = function() {
                if ($scope.addressMainForm.$valid) {
                    console.log("valid");
                } else {
                    console.log("invalid");
                }
                $scope.addresses.push({street: ""});
            };
            $scope.remove = function(index) {
                $scope.addresses.splice(index, 1);
            };
        });
    </script>
</head>
<body>

    <div ng-controller="TestController" style="width: 500px;">
        <form name="addressMainForm">
            <div ng-repeat="address in addresses">
                <ng-form name="addressForm">
                    <input ng-model="address.street" required name="street" type="text" placeholder="street" />
                    <button ng-if="$index > 0" ng-click="remove($index)">REMOVE</button>
                </ng-form>
                <br>
            </div>
        </form>
        <br>
        <button ng-click="next()">NEXT</button>
    </div>

</body>
</html>