angularjs Adding custom css class for specific input in form validation

Question

I need to add a custom css class to the parent div of my inputs :

<form role="form" name="myForm" ng-class="getCssClasses(myForm.username)">
    <div class="form-group">
        <label for="user">Username :</label>
        <input type="text" 
                class="form-control"
                ng-model="user.username"
                name="username"
                required
                ng-minlength="3" 
                ng-maxlength="16"
                is-taken
        />
        <span ng-show="myForm.username.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
        <span ng-show="myForm.username.$error.isTaken || myForm.username.$error.maxlength || myForm.username.$error.minlength || (myForm.username.$error.required && myForm.username.$dirty)" class="glyphicon glyphicon-remove form-control-feedback"></span>
        <span ng-show="myForm.username.$error.isTaken">Username <b>{{user.username}}</b> is already taken.</span>
        <span ng-show="myForm.username.$error.maxlength">Max length is 16 chars.</span>
        <span ng-show="myForm.username.$error.minlength">Min length is 3 chars.</span>
    </div>      
    <div class="form-group" ng-class="getCssClasses(myForm.email)">
        <label for="email">Email :</label>
        <input type="email" 
                class="form-control"
                ng-model="user.email" 
                name="email"  
                required
                ng-maxlength="100"
                is-taken
        />
        <span ng-show="myForm.email.$valid" class="glyphicon glyphicon-ok form-control-feedback"></span>
        <span ng-show="myForm.email.$error.isTaken || myForm.username.$error.maxlength || (myForm.email.$error.required && myForm.email.$dirty)" class="glyphicon glyphicon-remove form-control-feedback"></span>
        <span ng-show="myForm.email.$error.isTaken">Email <b>{{user.email}}</b> is already registered.</span>
        <span ng-show="myForm.email.$error.maxlength">Max length is 100 chars.</span>
        <span ng-show="(myForm.email.$error.email && myForm.email.$dirty)">Invalid email.</span>

    </div>
</form>

Is there a way to use the getCssClasses() function for the specified input ?

$scope.getCssClasses = function(ngModelController) {
    return {
        "has-feedback has-error": ngModelController.$invalid && ngModelController.$dirty,
        "has-feedback has-success": ngModelController.$valid && ngModelController.$dirty
    };
};

This actually updates all my fields at the same time because the ngModelcontroller is for the entire form.

JB Nizet · Accepted Answer · 2014-04-11 18:08:03Z

1

You put the ng-class directive on the form itself, instead of putting it on the <div class="form-group"> of the user name. That's certainly why all your fields are updated.

answered Apr 11, 2014 at 18:08

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Collectives™ on Stack Overflow

angularjs Adding custom css class for specific input in form validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest