AngularJS不会从对象中删除表单

AngularJS does not remove form from object

本文关键字：删除 表单 对象 AngularJS      更新时间：2023-09-26

我通过在数组上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 对象属性来解决此问题，但在我的实际代码中，我不想像那样混合这些问题。另一个简单的解决方案是只检查map调用的函数中的undefined或类似内容。但我觉得我不应该求助于那个......

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

编辑：

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

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

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

您有两种选择：1. 使用子数组：

<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. 同时使用表单数组和子数组。但是你应该先初始化表单对象...

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

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

相关文章：