4

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>
1
  • 1
    It looks more like ng-class isn't updating, if you check editor.ItemName.$invalid it's actually false. Commented Dec 5, 2012 at 19:43

1 Answer 1

2

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:

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

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.