Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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.

share|improve this answer
    
Damn!!! Haven't noticed that, so stupid mistake! Thanks :) –  Bobby Shark Apr 11 at 18:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.