sqlcte sqlcte - 2 years ago 54
HTML Question

Applying class on form submission on the div which wraps the input field which is invalid

I am new to Angularjs.I'm doing form validation and I want to apply a class on the div which contains a textbox with invalid state.

Here is my code:

<div class="col-sm-9">
<div class="input-group" ng-class="{invalidField:submitted && $scope.signupForm.fname.$Invalid }">
<span class="input-group-addon">
<i class="fa fa-user"></i>
<input id="txtFirstName" ng-class="{submitted: submitted}" ng-model="user.FirstName" class="form-control" autofocus="" name="fname" type="text" required>
<span ng-show="submitted && signupForm.fname.$error.required">FirstName is required.</span>

<input type="submit" class="btn btn-lg" ng-click="SignUpUser()" value="Sign Up" />

On the submission of form I set submitted = true.If submission is true and the field is invalid I want to apply class invalidField on the div but its not working.

Answer Source

The problem may be that one of your expressions uses a nested object, but I'm not sure about that. Instead of multiple expressions, use a scope function to do the comparison:

<div class="input-group" ng-class="{'invalidField': checkValidity()}">

$scope.checkValidity = function() {
    var valid = $scope.submitted && $scope.signupForm.fname.$Invalid;

    return valid;


This demo shows that the function returns true by way of the orange background.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download