从模型中删除项目时未更新表单验证。漏洞？
Posted
技术标签:
【中文标题】从模型中删除项目时未更新表单验证。漏洞？【英文标题】：Form validation not being updated when item is removed from the model. Bug? 【发布时间】：2013-02-18 00:01:08 【问题描述】：我最近开始使用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>
控制器：
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.3）尝试了这个，它的工作方式完全相同。
我可以做些什么来解决它，不改变源顺序。我知道我可以通过 CSS 来移动我的提交按钮，但在我的情况下，这并不是一个真正的选择；我需要提交按钮成为表单中的第一件事。
附注Here's a video of it in action.
【问题讨论】：
我不知道您的问题的答案，但似乎如果您将提交元素更改为基本按钮而不是<input>，它会按预期工作，例如<button ng-disabled="form.$invalid">Submit</button>。这对解决方法有帮助吗？
正在使用损坏的 plunkr 并将 phoneNumbers 放在 html 中以可视化对象发生的事情也停止了问题并且输出是正确的。显然不是一种解决方法，但很有趣
+1 获取有关 angularjs 标签问题的正确方法。
@Marc - I couldn't get it to work.
【参考方案1】：
显然这是一个活跃的错误。
见https://github.com/angular/angular.js/issues/1572
在那个错误中，发布了一个解决方法，它使用一个隐藏的计数器，在添加/删除字段时递增 - 这用于强制 Angular 重新验证表单。
给出了一个示例 jsFiddle：http://jsfiddle.net/HhcXT/
在模板中：
<input type="hidden" ng-bind="abc" />
在控制器中：
$scope.removeYears = function(item)
var index = $.inArray(item, $scope.years)
$scope.years.splice(index, 1); //remove element
$scope.abc += 1;
【讨论】：
谢谢！做到了。出于好奇：您使用什么搜索词来查找此错误报告？在发布此内容之前，我已经搜索了很长时间，但找不到任何东西。 我认为搜索是“site:github.com angularjs form.$invalid not updates”。从个人经验来看，github 上的错误通常非常有用，因为标准是提供工作示例和解决方法——就像在这种情况下一样。 谢谢@Alex。你为我节省了很多（额外的）悲伤:)以上是关于从模型中删除项目时未更新表单验证。漏洞？的主要内容，如果未能解决你的问题，请参考以下文章