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>

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

当我点击＆＃34;删除＆＃34;然后＆＃34; NEXT＆＃34; - 生成了javascript错误：

Error: $scope.addressMainForm.addressForm is undefined

如果阵列中仍有一个元素，为什么它未定义？否则一切正常（console.log输出），直到删除所有元素但最后一个元素和＆＃34; NEXT＆＃34;点击。

Answer 1

当您致电$scope.addressMainForm.addressForm.$valid时，您正在尝试致电检查以查看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>

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

1 个答案: