Reuse ngClass directive in AngularJS

Question

I am trying to validate a form and there is just way too much logic in the html page. I am already using ngMessages because it's quite hopeless without it.

I am doing the object variant of ng-class like this

ng-class="{ 'has-error' : registerForm.username.$invalid && registerForm.username.$touched, 'has-success' : registerForm.username.$valid && registerForm.username.$touched }"

As you can see there is already alot of code already in the above line. I have to use this directive 6 times so my only option as it seems right now is to copy paste it 5 other places. I tried doing something like this but it did not work

<form ng-init="formGroupClassObject = { 'has-error' : registerForm.username.$invalid && registerForm.username.$touched, 'has-success' : registerForm.username.$valid && registerForm.username.$touched }">

<div class="form-group" ng-class="formGroupClassObject"></div>

I don't understand why this do not work. Do you have any other suggestions on reuse-ability of the code above?

Answer 1

How about:

ng-class="getFormClasses(registerForm)"

And in your common controller:

$scope.getFormClasses = function(form) {
  if (!form) { return; }
  return {
    'has-error'  : form.username.$invalid && form.username.$touched,
    'has-success': form.username.$valid   && form.username.$touched
  }
};

If you use ng-init, the classes will not be updated when the form validity changes.