4

我在控制器立即加载的表单/模型上遇到 AngularJS 验证问题。表单以部分不正确的验证状态加载，返回正确验证状态的唯一方法是进入实际的无效状态。另一种解决方法是为表单设置模型，延迟 1 毫秒。我创建了一个 jsFiddle，在这里描述了这个功能：http: //jsfiddle.net/Yauxm/4/

只是为了更清楚起见，在使用有效值初始化的标记为 required 的属性上，表单和输入都正确标记为有效，但是包装 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>
4

1 回答 1

2

您的示例适用于 AngularJS 1.0.2 JSFiddle here，但不适用于 1.0.3。我们能够得到 的值editor.ItemName.$invalid，但显然该ngClass 指令可能被破坏了。在 github 上检查这个问题：

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

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

JSFiddle Angular 1.0.3

于 2012-12-05T20:28:10.923 回答