gpt4 book ai didi

javascript - 从模型中删除项目时不会更新表单验证。漏洞?

转载 作者:太空狗 更新时间:2023-10-29 13:49:47 28 4
gpt4 key购买 nike

我最近开始使用 AngularJS,我想我遇到了一个奇怪的错误。


首先,这是一些工作代码:

查看:

<body ng-controller="MainCtrl">

<form name="form">

<div ng-repeat="phone in phoneNumbers">
<input ng-model="phone.number" required />
<button ng-click="deleteNumber($index)">Delete Number</button>
</div>

<button ng-click="addNumber()">Add Number</button>

<input type="submit" ng-disabled="form.$invalid" />

</form>

</body>

Controller :

app.controller('MainCtrl', function ( $scope ) {

$scope.phoneNumbers = [{
number: '212-123-4567'
}];

$scope.addNumber = function () {
$scope.phoneNumbers.push({
number: ''
});
};

$scope.deleteNumber = function ( index ) {
$scope.phoneNumbers.splice(index, 1);
};

});

这是 Plunkr:Working example

我认为代码非常简单:有一个 ng-repeat 显示每个电话号码,您可以对其进行编辑/删除。如果添加了电话号码,则不能为空;如果电话号码为空,提交按钮将被禁用。


当提交按钮位于 ng-repeat 上方时,问题就会出现。如果您添加电话号码,将其留空,然后将其删除,提交按钮将保持禁用状态:

<body ng-controller="MainCtrl">

<form name="form">

<input type="submit" ng-disabled="form.$invalid" />

<div ng-repeat="phone in phoneNumbers">
<input ng-model="phone.number" required />
<button ng-click="deleteNumber($index)">Delete Number</button>
</div>

<button ng-click="addNumber()">Add Number</button>

</form>

</body>

这是 plunkr:Broken example


我喜欢 AngularJS,但这几乎让我发疯。我已经花了 20 多个小时来追逐这个愚蠢的错误。由于通常的演示在底部有提交按钮,因此我无法重现该问题。我不得不使用我的实际代码,慢慢地将代码减少到最低限度。这是一个非常庞大和复杂的应用程序,并且...好吧,我现在不再提示了。

我的问题有两个方面:

  1. 这是一个错误吗?我什至在不稳定的分支 (1.1.3) 上尝试过,它的工作方式完全相同。

  2. 我可以做些什么来解决这个问题,不改变源顺序。我知道我可以通过 CSS 在我的提交按钮周围移动,但在我的情况下这不是一个真正的选择;我需要将提交按钮放在表单的第一位。


附言Here's a video of it in action .

最佳答案

显然这是一个活跃的错误。

参见 https://github.com/angular/angular.js/issues/1572

在那个错误中,发布了一个解决方法,它使用一个隐藏的计数器,该计数器在添加/删除字段时递增 - 这用于强制 Angular 重新验证表单。

给出了一个 jsFiddle 示例:http://jsfiddle.net/HhcXT/

在模板中:

<input type="hidden" ng-bind="abc" />

在 Controller 中:

$scope.removeYears = function(item) {
var index = $.inArray(item, $scope.years)
$scope.years.splice(index, 1); //remove element
$scope.abc += 1;
}

关于javascript - 从模型中删除项目时不会更新表单验证。漏洞?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15192404/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com