AngularJS 不会从对象中删除表单答案

【问题标题】：AngularJS does not remove form from objectAngularJS 不会从对象中删除表单
【发布时间】：2016-04-21 13:25:39
【问题描述】：

我通过ng-repeat-ing 在一个数组上生成表单。每个生成的表单都添加到 vm.forms 对象中。当从数组中删除一个项目时，我正在迭代相应的表单被删除，但 vm.forms 对象仍然有原始表单的键，导致我出现 undefined 错误。

angular
    .module('myApp', [])
    .controller('FormLooper', FormLooper);

function FormLooper() {
    var vm = this;
    
    vm.children = [{
        name: 'Sarah',
        age: 9,
    }, {
        name: 'John',
        age: 13,
    }];
    vm.removeChild = removeChild;
    vm.forms = {};
    vm.showSummary = false;
    vm.triggerError = triggerError;

    function triggerError() {
        console.log('Available forms:', vm.forms);
        console.log('property names:', Object.getOwnPropertyNames(vm.forms));

        Object.getOwnPropertyNames(vm.forms).map(function(key) {
            console.log('key', key, vm.forms[key]);
            return vm.forms[key].$valid; // This will result in an `undefined` error
        });
    }

    function removeChild(index) {
        vm.children.splice(index, 1);
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="FormLooper as vm">
        <div ng-repeat="child in vm.children">
            <form name="vm.forms.formId{{ $index }}">
                <label>
                    Name: <input ng-model="child.name">
                </label>
                <br>
                <label>
                    Age: <input type="number" ng-model="child.age">
                </label>
            </form>
            <button ng-click="vm.removeChild($index)">RemoveChild</button>
        </div>
        <button ng-click="vm.triggerError()">Trigger Error (check your console output)</button>
    </div>
</body>

或者，与 JSFiddle 相同的代码：http://jsfiddle.net/Tobbe/8eohL2nq/2/

不应该用角度删除整个对象属性吗？

我可以通过在removeChild 函数中手动delete-ing 对象属性来解决这个问题，但在我的实际代码中，我不想像那样混合这些问题。另一个简单的解决方案是只检查undefined 或map 调用的函数中的类似内容。但我觉得我不应该求助于那个......

那么，我在这里错过了什么吗？

编辑：

请注意控制台输出并注意vm.forms 对象在创建表单时已正确填充。 Angular 自己完成这一切 :) 所以它会在创建表单时添加到对象中，但在删除表单时它不会从对象中删除。这是一个错误吗？

【问题讨论】：

你似乎从来没有真正初始化过 vm.forms（至少在 js 中没有）
我愿意vm.forms = {};。这还不够吗？

标签： javascript angularjs forms

【解决方案1】：

您正在处理苹果和桃子...

您尝试使用 vm.forms.formid{{$index}} 来搜索 vm.forms 对象。您从不初始化。

您有两个选择： 1. 使用 children 数组：

<div ng-repeat="child in vm.children">
            <form name="vm_forms_formId{{ $index }}">
                <label>
                    Name: <input ng-model="child.name">
                </label>
                <br>
                <label>
                    Age: <input type="number" ng-model="child.age">
                </label>
            </form>
</div>

这将为您提供有效的表单名称（您也可以使用孩子的 ID）。

同时使用表单数组和子数组。但是你应该先初始化表单对象......

【讨论】：

我没有看到您在选项 1 中所做的更改，除了表单名称中的点到下划线。但是在这个改变之后，triggerError 中的循环会是什么样子？
对于选项 2。这不正是我正在做的吗？
据我了解，angular 确实在 vm.forms.formId0 内部保存了一个值，它代表表单本身（但从角度来看不是 dom 本身）。所以 vm.forms.formId0 = {一些复杂的对象，即。验证值等）。当你从 children 数组中删除一个项目时，angular 会监视它并操纵 dom。您在 vm.forms.formId0 中引用的复杂对象变为 null 或空。 (vm.forms.formId0 = {}) 但 vm.forms[formId0] 仍然存在
我只是不明白你为什么需要表单对象？如果你真的这样做了，也拼接 vm.forms 对象。
是的，vm.forms[formId0] 仍然存在，但它的值为undefined。（不是{}。）我需要表单对象来检查所有表单上的$valid。

【解决方案2】：

我想要的行为应该由 AngularJS 解析器处理，但目前不支持。目前最简单的解决方法是在访问时检查undefined。

在此处查看更多信息：https://github.com/angular/angular.js/issues/14510

【讨论】：