Question

I am having an issue with AngularJS validation on a form/model that is loaded immediately by a controller. The form loads in a partially incorrect validation state, and the only way to get back to a correct validation state is to enter an actual invalid state. The other workaround is to set the model for the form with a 1ms delay. I have created a jsFiddle the describes this functionality here: http://jsfiddle.net/YAuxm/4/

Just for more clarification, on a property that is marked as required that is initialized with a valid value, the form and the input are both correctly marked as valid, however the wrapping div is marked as invalid. Modifying the value has no effect until the value is actually invalid (i.e. empty). Once the field is properly invalidated, then all subsequent changes will be properly validated until the route is changed, in which case the behavior is back to what I have described here.

Here is an abbreviated version of the example posted on 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>

Answer 1

Your example works in AngularJS 1.0.2 JSFiddle here, but it doesn’t in 1.0.3. We are able to get the value of editor.ItemName.$invalid, but apparently the ngClass directive might be broken. Check this issue on github:

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

The quick fix would be to be add a CSS rule to style the .control-group when the form is invalid. For example:

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

JSFiddle Angular 1.0.3