从模型中删除项目时，表单验证不会更新。错误？

我最近开始使用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。

来源

2013-03-03 Joseph Silber

我不知道回答你的问题，但现在看来，如果您将提交元素更改为基本按钮而不是“”，它按预期工作，例如''。这有助于解决问题吗？ – Marc 2013-03-04 00:26:13

正在玩破碎的plunkr，并在HTML中放置'{{phoneNumbers}}'以可视化对象发生的事情也停止了问题，并且输出是正确的。显然不是一个解决方法，但有趣的 – charlietfl 2013-03-04 00:43:15

+ 1正确的方式来问一个关于angularjs标签的问题。 – Stewie 2013-03-04 01:05:43

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

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

在该错误，一个解决方法被张贴其使用当字段被添加/移除时递增一个隐藏的计数器 - 这是用于强制角重新验证表单。

一个例子的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; 
}

来源

2013-03-04 00:36:43

谢谢！那样做了。出于好奇：你用什么搜索词找到这个错误报告？在我发布之前，我已经搜索了相当长的一段时间，但找不到任何东西。 – 2013-03-04 02:08:37

我认为搜索是'site：github.com angularjs form。$ invalid not updating。'从个人经验来看，github上的错误通常非常有用，因为标准是提供工作示例和解决方法 - 就像这种情况一样。 – 2013-03-04 02:29:38

谢谢@Alex。你为我节省了很多（额外）痛苦:) – 2013-03-04 02:33:09

从模型中删除项目时，表单验证不会更新。错误？

回答

相关问题