Углы повторения, ошибки формы и проверки

Question

Углы повторения, ошибки формы и проверки

0

Упрощенная версия кода:

<!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>

который выглядит в браузере следующим образом:

Когда я нажимаю "REMOVE", а затем "NEXT" - создается ошибка JavaScript:

Error: $scope.addressMainForm.addressForm is undefined

Почему это не определено, если в массиве остается еще один элемент? Все остальное работает нормально (вывод console.log), пока все элементы не будут удалены, а последний будет нажат "NEXT".

Caballero 19 авг. 2015, в 18:01

Источник

0

Вы пытались напечатать $scope.addressMainForm в журнале консоли, чтобы увидеть его содержимое?
Alberto I.N.J. 19 авг. 2015, в 16:19
0

@AlbertoI.N.J.AlbertoI.NJ Да, и свойство addressForm исчезло, по какой-то причине удаление рядом с последним элементом из массива $scope.addresses также удаляет это свойство.
Caballero 19 авг. 2015, в 16:24

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Вы пытались напечатать $scope.addressMainForm в журнале консоли, чтобы увидеть его содержимое?
@AlbertoI.N.J.AlbertoI.NJ Да, и свойство addressForm исчезло, по какой-то причине удаление рядом с последним элементом из массива $scope.addresses также удаляет это свойство.

Gnarlywhale · Accepted Answer · 2015-08-19T14-23-00.000Z

Когда вы вызываете $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>