我在控制器立即加载的表单/模型上遇到AngularJS验证问题.表单加载部分不正确的验证状态,返回正确验证状态的唯一方法是输入实际的无效状态.另一种解决方法是为表单设置延迟1ms的模型.我创建了一个jsFiddle,在这里描述了这个功能:
http://jsfiddle.net/YAuxm/4/
为了进一步说明,在标记为需要的属性上使用有效值进行初始化,表单和输入都被正确标记为有效,但包装div被标记为无效.在该值实际上无效(即为空)之前,修改该值无效.一旦字段正确无效,那么所有后续更改都将被正确验证,直到路由更改为止,在这种情况下,行为将回到我在此处描述的内容.
这是jsFiddle上发布的示例的缩写版本:
<div ng-app="Test">
<script type="text/ng-template" id="Templ">
<ul style="width:20%; float:left;">
<li ng-repeat="item in Items">
<a href="#/edit/{{item.Id}}">Edit {{item.Name}}</a>
</li>
</ul>
<form name="editor" ng-show="CurrentItem">
<!-- this evaluates to true on initial load even when the value is valid -->
<div ng-class="{error: editor.ItemName.$invalid}">
<input type="text" name="ItemName" ng-model="CurrentItem.Name" required />
</form>
</script>
<div ng-view></div>
</div>
<script type='text/javascript'>
var items = [{Id: 0, Name: 'Item 1', SomeNumber: 100},
{Id: 1, Name: 'Item 2', SomeNumber: 200},
{Id: 2, Name: 'Item 3', SomeNumber: 300}];
angular.module('Test', []).
config(function($routeProvider) { $routeProvider.
when('/edit/:itemIndex', { controller: TestCtrl, templateUrl: 'Templ' }).
otherwise({ redirectTo: '/edit/0' });
});
function TestCtrl($scope, $location, $routeParams) {
$scope.Items = items;
$scope.CurrentItem = $scope.Items[$routeParams.itemIndex];
}
</script>
最佳答案 您的示例适用于AngularJS 1.0.2
JSFiddle here,但不适用于1.0.3.我们能够获得editor.ItemName.$的值,但是显然ngClass指令可能会被破坏.在github上检查这个问题:
> https://github.com/angular/angular.js/issues/1637
快速修复是在表单无效时添加CSS规则来设置.control-group的样式.例如:
form.ng-invalid-required .control-group{background-color: red; color:#fff}