使用AngularJS进行初始验证

Question

我在使用 AngularJS 进行表单/模型验证时遇到了问题，该表单/模型由控制器立即加载。表单以部分不正确的验证状态加载，唯一使其恢复到正确验证状态的方法是使其进入实际无效状态。另一个解决方法是将表单的模型设置为 1 毫秒延迟。我已经在这里创建了一个描述此功能的 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>

- Luke

---

看起来更像是ng-class没有更新，如果你检查editor.ItemName.$invalid，它实际上是false。 - Ben Lesh

Answer 1

你的示例在AngularJS 1.0.2中这里是JSFiddle可以工作，但在1.0.3中无法工作。我们能够获取editor.ItemName.$invalid的值，但显然ngClass指令可能已经损坏了。请在github上检查此问题：

• https://github.com/angular/angular.js/issues/1637

快速解决方法是在表单无效时添加CSS规则来样式化.control-group。例如：

form.ng-invalid-required .control-group{background-color: red; color:#fff}

JSFiddle Angular 1.0.3

的意思是：使用 JSFiddle Angular 1.0.3。

- jaime