Jos*_*ber 8 html javascript validation angularjs
我最近开始使用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:工作示例.
我认为代码非常简单: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>
这是傻瓜:破碎的例子.
我喜欢AngularJS,但这几乎让我疯狂.我花了20个小时追逐这个愚蠢的错误.由于通常的演示在底部有提交按钮,我无法重现该问题.我不得不采用我的实际代码,并慢慢将代码减少到最小.这是一个非常大而复杂的应用程序,而且......好吧,我现在不再抱怨了.
我的问题是双重的:
这是一个错误吗？我甚至尝试使用不稳定的分支(1.1.3),它的工作方式完全相同.
在不改变源顺序的情况下,我可以做些什么来解决它.我知道我可以通过CSS移动我的提交按钮,但在我的情况下,这不是一个真正的选择; 我需要提交按钮才能成为表单中的第一件事.
PS 这是一个实际的视频.
显然这是一个活跃的bug.
请参阅https://github.com/angular/angular.js/issues/1572
在该bug中,发布了一个使用隐藏计数器的变通方法,该计数器在添加/删除字段时递增 - 这用于强制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;
}
| 归档时间： |
|
| 查看次数： |
1929 次 |
| 最近记录： |