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.